ajax json 表格排序。分页,自己定义每页数量

 点击表头能够排序。依照升序或者降序,另外支持多列排序

设置每页数量

 

XML/HTML Code
  1. <table id='example3'>  
  2.   
  3. <thead>  
  4. <tr>  
  5.  <th>ID</th>  
  6.  <th>First name</th>  
  7.  <th>Last name</th>  
  8.  <th>Grade</th>  
  9.  <th>Grade 2</th>  
  10.  <th>Efficiency</th>  
  11.  <th>Age</th>  
  12.  <th>Company</th>  
  13. </tr>  
  14. </thead>  
  15.   
  16. <tbody>  
  17. </tbody>  
  18.   
  19. </table>  

 

JavaScript Code
  1. <script type='text/javascript'>  
  2. $(function() {  
  3.     $.ajax({  
  4.         url: "example3.json",  
  5.         dataType: "json"  
  6.     }).done(function(data) {  
  7.         console.log(data);  
  8.         $("#example3").slimtable({  
  9.             tableData: data  
  10.         });  
  11.     }).fail(function(param1,param2) {  
  12.         console.log("error: "+param2);  
  13.     });  
  14. });  
  15. </script>  

 example3.json

XML/HTML Code
  1. [  
  2.     [ "1", "ex1", "ex_a", "2,5", "2.5", "30%", "19", "ex_a1" ],  
  3.     [ "2", "ex2", "ex_b", "5,4", "5.4", "28,5%", "33", "ex_b1" ],  
  4.     [ "3", "ex3", "ex_c", "16,7", "16.7", "19,3%", "33", "ex_c1" ],  
  5.     [ "4", "ex4", "ex_d", "2,8", "2.8", "1,8%", "28", "ex_b1" ],  
  6.     [ "5", "ex6", "ex_e", "2,5", "2.5", "2,85 %", "44", "ex_a1" ],  
  7.     [ "6", "ex7", "ex_f", "5,5", "5.5", "16%", "52", "ex_d1" ],  
  8.     [ "7", "ex8", "ex_g", "6,8", "6.8", "1,9%", "39", "ex_e1" ],  
  9.     [ "8", "ex9", "ex_h", "6,8", "6.8", "1,9 %", "28", "freejs.net" ]  
  10. ]  

 

原文地址:http://www.freejs.net/article_fenye_156.html

ajax json 表格排序,分页,自己定义每页数量的更多相关文章

  1. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  2. jquery ajax json简单的分页,模拟数据,没有封装,只显示原理

    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...

  3. jsp+oracle 排序分页+Pageutil类

    1.rownum和排序 Oracle中的rownum的是在取数据的时候产生的序号,所以想对指定排序的数据去指定的rowmun行数据就必须注意了. SQL> select rownum ,id,n ...

  4. ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)

    0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.

  5. 案例学习总结:原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  6. 基于bootstrap3的 表格和分页的插件

    如题 样式呢就是bootstrap3 的 功能呢就是实现表格和分页 (以上废话) 本来是自己没事儿写的一个js插件,曾经搁浅了一阵子,但最近由于公司项目的原因也需要这样的一个插件,所以就捡起来做了个可 ...

  7. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  8. 三 drf 认证,权限,限流,过滤,排序,分页,异常处理,接口文档,集xadmin的使用

    因为接下来的功能中需要使用到登陆功能,所以我们使用django内置admin站点并创建一个管理员. python manage.py createsuperuser 创建管理员以后,访问admin站点 ...

  9. 表格排序插件datatables

    之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...

随机推荐

  1. JavaWeb学习 (十一)————Session

    一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...

  2. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  3. [转]Angular 2 / 4 / 5 not working in IE11

    本文转自:https://stackoverflow.com/questions/35140718/angular-2-4-5-not-working-in-ie11/47777695#4777769 ...

  4. c#方法转异步例子

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. Spring Security OAuth2 SSO 单点登录

    基于 Spring Security OAuth2 SSO 单点登录系统 SSO简介 单点登录(英语:Single sign-on,缩写为 SSO),又译为单一签入,一种对于许多相互关连,但是又是各自 ...

  6. Mybatis获取插入记录的自增长ID

    转自:http://blog.csdn.net/tolcf/article/details/39035259 1.在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“k ...

  7. jsp-servlet 的相关请求路径问题 —url

    jsp-servlet 的相关请求路径问题  —url 本文章主要解决的几方面问题如下: 常见涉及路径元素: jsp页面请求和servlet请求转发.重定向的关系 如何避免下一步请求受上一步请求在UR ...

  8. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

  9. POM、STS、IOC、DI、AOP

    POM:全称:poject object model 说明:项目对象模型.maven用来管理项目的依赖.编译.文档等信息 STS: 全称:spring tool suite 说明:spring 基于e ...

  10. 【读书笔记】iOS-UDID

    UIDevice类可以返回当前iOS设备的UDID,以前开发者通常使用UDID作为识别每台设备的唯一标识,然后从iOS5开始,苹果公司将这一功能标记为废止并不推荐使用,苹果公司在iOS6之后将这个功能 ...