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

修复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. Greenplum源码编译安装(单机及集群模式)完全攻略

    公司有个项目需要安装greenplum数据库,让我这个gp小白很是受伤,在网上各种搜,结果找到的都是TMD坑货帖子,但是经过4日苦战,总算是把greenplum的安装弄了个明白,单机及集群模式都部署成 ...

  2. Linux学习之五——压缩与备份

    一.Linux下常见的压缩文件 *.Z compress 程序压缩的档案(现在不流行了,用gzip也能解压): *.gz gzip 程序压缩的档案: *.bz2 bzip2 程序压缩的档案: *.ta ...

  3. web前端的渐进增强式开发模型

    渐进增强是前端开发的根本基础.从根本的层面上讲,它可以将HTML,CSS,JavaScript这三者的功能分离开来,这能让当前的项目开一个好头.我们在创建项目的开始要将这三者分开,它们对应的称呼是结构 ...

  4. jemter的使用(二)

    在上篇文章中介绍了如何在jmeter中添加请求,并执行查看结果,下面介绍一下,在运行时需要用到的一些管理器 一.HTTP信息头管理器 1.添加信息头管理器 2.添加变量和值,如:Content-Typ ...

  5. 写一个ActionFilter检测WebApi接口请求和响应

    我们一般用日志记录每次Action的请求和响应,方便接口出错后排查,不过如果每个Action方法内都写操作日志太麻烦,而且客户端传递了错误JSON或XML,没法对应强类型参数,请求没法进入方法内, 把 ...

  6. 边工作边刷题:70天一遍leetcode: day 84-2

    要点:这题是combination的应用,从左向右想比从右向左容易. 因为有结果从小到大的要求,暗示用combintion而不是permutation 其实就是从小到大验证因子,每个因子和其对称因子立 ...

  7. github结合TortoiseGit使用sshkey,无需输入账号和密码

    1.github上支持三种方式进行项目的clone    https,ssh,subversion https://github.com/用户名/版本库.git ssh的方式 git@github.c ...

  8. Eclipse 分屏显示同一个文件

    场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -> Toggle Split Edit ...

  9. Eclipse c++头文件问题(未完)

    http://stackoverflow.com/questions/7905025/string-could-not-resolved-error-in-eclipse-for-c-eclipse- ...

  10. c++ web服务器

    https://github.com/facebook/proxygen http://tengine.taobao.org/ http://code.google.com/p/mongoose/ht ...