入职以后的第二个任务  根据用户所选的价格范围 筛选数据

修复BUG - 筛选数据后 总数没有更新、列表显示错误、翻页加载错误

用到的一些知识点

jquery插件系列之 - Slider滑块

max : Number : 100       设置滑动条的最大值。

初始:$('.selector').slider({ max: 7 });       获取:var max = $('.selector').slider('option', 'max');       设置:$('.selector').slider('option', 'max', 7);

min : Number : 0      设置滑动条的最小值。

初始:$('.selector').slider({ min: -7 });       获取:var min = $('.selector').slider('option', 'min');       设置:$('.selector').slider('option', 'min', -7

value    获取或设置当前滑动条的值。

用法:.slider( 'value' , [value] )

stop : slidestop       当滑块停止滑动时,触发此事件。

初始:$('.selector').slider({ stop: function(event, ui) { ... } });       绑定:$('.selector').bind('slidestop', function(event, ui) { ... });

jQuery Pagination分页插件

使用方法

跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);

参数

参数名 描述 参数值
maxentries 总条目数 必选参数,整数
items_per_page 每页显示的条目数 可选参数,默认是10
num_display_entries 连续分页主体部分显示的分页条目数 可选参数,默认是10
current_page 当前选中的页面 可选参数,默认是0,表示第1页
num_edge_entries 两侧显示的首尾分页的条目数 可选参数,默认是0
link_to 分页的链接 字符串,可选参数,默认是"#"
prev_text “前一页”分页按钮上显示的文字 字符串参数,可选,默认是"Prev"
next_text “下一页”分页按钮上显示的文字 字符串参数,可选,默认是"Next"
ellipse_text 省略的页数用什么文字表示 可选字符串参数,默认是"..."
prev_show_always 是否显示“前一页”分页按钮 布尔型,可选参数,默认为true,即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮 布尔型,可选参数,默认为true,即显示“下一页”按钮
callback

让人比较头疼的是 原来的处理,这个页面有多个列表全都是用同一个JS脚本同一个存储过程根据表单类型不同查询生成分页后的table的。

但是只有这个QWA列表需要价格筛选,于是就出现了以上列出的BUG   筛选数据后 总数没有更新、列表显示错误、翻页加载错误

修改步奏是

当 slider().on('slideStop', function (ev) 获取数据范围,加载重写的独立方法

根据当前的范围筛选符合条件的数据行。

之前想着不改BLL层,然后直接DataTable.Select ,结果只筛选了当前页的。

于是只能单独新建一个存储过程,传入数据范围筛选。

Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记的更多相关文章

  1. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  2. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  4. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  5. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. Knockout.Js官网学习(加载或保存JSON数据)

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  7. jquery.datatable.js与CI整合 异步加载(大数据量处理)

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  8. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  9. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

随机推荐

  1. java微信接口之二—获取用户组

    一.微信获取用户组接口简介 1.请求 该请求也是GET方式请求.请求的url格式如下: https://api.weixin.qq.com/cgi-bin/groups/get?access_toke ...

  2. cocos2d-x之action初试

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...

  3. 烂泥:KVM虚拟机windows系统增加硬盘

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 前一篇文章介绍了有关linux系统添加硬盘的方法,这次我们来介绍有关windows系统添加的相关步骤. 其实linux和windows添加的硬盘的方法都 ...

  4. android:layout_gravity和android:gravity的区别

    1.首先来看看android:layout_gravity和android:gravity的使用区别. android:gravity: 这个是针对控件里的元素来说的,用来控制元素在该控件里的显示位置 ...

  5. NOIP2010普及组T4 三国游戏——S.B.S.

    题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有 N 位武将(N为偶数且不小于 4),任意两个武将之 ...

  6. cri-o 与 cni的集成分析

    // 创建pod时,network的设置 1.// cri-o/server/sandbox.go // RunPodSandbox creates and runs a pod-level sand ...

  7. selenium处理div生成弹框

    目前遇到的弹框有两种,一种是alert,一种是div,如果遇到div模拟的弹框,在用alert就不行了. 1. public static Alert getAlert(WebDriver dr) { ...

  8. 【读书笔记《Android游戏编程之从零开始》】18.游戏开发基础(碰撞检测)

    1.矩形碰撞 所谓矩形碰撞,就是利用两个矩形之间的位置关系来进行判断,如果矩形的像素在另外一个矩形之中,或者之上都可以认为这两个矩形发生了碰撞. 如果单纯的去考虑哪些情况会判定两个矩形发生碰撞,倒不如 ...

  9. Codeforces Round #253 Div2 D.Andrey and Problem 概率+贪心

    概率计算:P(某set) =  令:  和   现在考虑: 1.考虑某个集合,再加一个概率为Pi的朋友后能不能使总概率提高. 即: 由公式可知, 如果 S < 1,则delta > 0,则 ...

  10. Bellman-Ford算法判负环

    算法思想:如果没有负权回路,dis数组应该会在n-1次松弛之后结束. 算法复杂度:O(n*m).比Dijkstra算法复杂度要高. 代码: bool Bellman_Ford(int s) { int ...