dataTables是一种很好用前端表格显示库。当加载大量数据时，可以用Ajax 获取数据来提高效率，增速网页加载速率。下面以一个例子作示范。

首先，需要下载jQuery以及dataTables库。这里使用的是版本是jquery v1.11.3和DataTables 1.10.9。下载网址：http://datatables.NET/。

先上网页的代码。要注意的是，table中的thead和tbody必须要有。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <head>
  5. <link href="http://www.zhuhaihengxin.com/libs/datatables/1.10.0/css/jquery.dataTables.css" rel="stylesheet">
  6. <title>dataTable example</title>
  7. <script type="text/javascript" src="jquery.js"></script>
  8. <script type="text/javascript" src="jquery.dataTables.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function() {
  11. $("#datatable").dataTable({
  12. "processing" : true,
  13. "serverSide" : true,
  14. "paginationType":"full_numbers",
  15. "ajax" : "load",
  16. "columns" : [
  17. {"data" : "id"},
  18. {"data" : "firstName"},
  19. {"data" : "lastName"}
  20. ]
  21. });
  22. });
  23. </script>
  24. <style>
  25. h2{
  26. text-align:center;
  27. }
  28. div {
  29. float: left;
  30. margin: 10px;
  31. padding: 4px;
  32. }
  33. a{
  34. margin:5px;
  35. }
  36. table,tr,td,th{
  37. border:2px solid #3aec7b;
  38. border-collapse:collapse;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <TABLE id="datatable">
  44. <THEAD>
  45. <tr>
  46. <th>ID</th>
  47. <th>First Name</th>
  48. <th>Last Name</th>
  49. </tr>
  50. </THEAD>
  51. <tbody>
  52. </tbody>
  53. </TABLE>
  54. </body>
  55. </html>

当网页加载的时候，ajax发出请求，如下所示。

  1. draw=[1]
  2. columns[0][data]=[id]
  3. columns[0][name]=[]
  4. columns[0][searchable]=[true]
  5. columns[0][orderable]=[false]
  6. columns[0][search][value]=[]
  7. columns[0][search][regex]=[false]
  8. columns[1][data]=[firstName]
  9. columns[1][name]=[]
  10. columns[1][searchable]=[true]
  11. columns[1][orderable]=[true]
  12. columns[1][search][value]=[]
  13. columns[1][search][regex]=[false]
  14. columns[2][data]=[lastName]
  15. columns[2][name]=[]
  16. columns[2][searchable]=[true]
  17. columns[2][orderable]=[true]
  18. columns[2][search][value]=[]
  19. columns[2][search][regex]=[false]
  20. order[0][column]=[0]
  21. order[0][dir]=[asc]
  22. start=[0]
  23. length=[10]
  24. search[value]=[]
  25. search[regex]=[false]
  26. _=[1441278114568]

其中，draw是请求的序号，start是数据的偏移量，length是需要返回的最大数据条数。search[value]是查找的值。

服务端采用Java的servlet完成。为简单起见，这里直接采用继承HttpServlet的方式实现。数据本应该从数据库中提取，但这里为了简单，生成了静态数据集合作为数据源。每次请求都从集合中查找匹配的数据，然后转换成JSON返回。JSON库采用阿里的fastjson。

代码如下所示。

  1. package jspTest;
  2. import java.io.IOException;
  3. import java.util.ArrayList;
  4. import java.util.Arrays;
  5. import java.util.Enumeration;
  6. import java.util.LinkedList;
  7. import java.util.Random;
  8. import javax.servlet.ServletException;
  9. import javax.servlet.annotation.WebServlet;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import com.alibaba.fastjson.JSON;
  14. import com.alibaba.fastjson.JSONObject;
  15. import java.util.List;
  16. import java.util.Map;
  17. /**
  18. * Servlet implementation class DataLoad
  19. */
  20. public class DataLoad extends HttpServlet {
  21. private static final long serialVersionUID = 1L;
  22. static class Person {
  23. private long id;
  24. private String firstName;
  25. private String lastName;
  26. public long getId() {
  27. return id;
  28. }
  29. public void setId(long id) {
  30. this.id = id;
  31. }
  32. public String getFirstName() {
  33. return firstName;
  34. }
  35. public void setFirstName(String firstName) {
  36. this.firstName = firstName;
  37. }
  38. public String getLastName() {
  39. return lastName;
  40. }
  41. public void setLastName(String lastName) {
  42. this.lastName = lastName;
  43. }
  44. public boolean match(String pattern) {
  45. return firstName.contains(pattern) || lastName.contains(pattern) || Long.toString(id).contains(pattern);
  46. }
  47. }
  48. private static Random r = new Random();
  49. private static List<Person> ps = new ArrayList<Person>();
  50. static {
  51. int size = 2512;
  52. for (int k = 0; k < size; ++k)
  53. ps.add(generatePerson());
  54. }
  55. static Person generatePerson() {
  56. Person p = new Person();
  57. p.setId(ps.size() + 1);
  58. p.setFirstName(generateName());
  59. p.setLastName(generateName());
  60. return p;
  61. }
  62. private static String generateName() {
  63. StringBuilder sb = new StringBuilder();
  64. sb.append((char) (r.nextInt(26) + 'A'));
  65. int len = 2 + r.nextInt(4);
  66. for (int k = 0; k < len; ++k)
  67. sb.append((char) (r.nextInt(26) + 'a'));
  68. return sb.toString();
  69. }
  70. private List<Person>result;
  71. public List<Person>getResult(){
  72. return result;
  73. }
  74. /**
  75. * @see HttpServlet#HttpServlet()
  76. */
  77. public DataLoad() {
  78. super();
  79. }
  80. /**
  81. * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  82. *      response)
  83. */
  84. protected void doGet(HttpServletRequest request, HttpServletResponse response)
  85. throws ServletException, IOException {
  86. int start=0;
  87. int length=10;
  88. String pattern="";
  89. String draw="1";
  90. Map<String,String[]>params=request.getParameterMap();
  91. for(String attr:params.keySet()){
  92. String[] val=params.get(attr);
  93. System.out.println(attr+"="+Arrays.toString(val));
  94. if(attr.equals("start"))
  95. start=Integer.parseInt(val[0]);
  96. if(attr.equals("length"))
  97. length=Integer.parseInt(val[0]);
  98. if(attr.equals("search[value]"))
  99. pattern=val[0];
  100. if(attr.equals("draw"))
  101. draw=val[0];
  102. }
  103. int total=filter(start, length, pattern);
  104. JSONObject obj = new JSONObject();
  105. obj.put("draw", draw);
  106. obj.put("recordsTotal", ps.size());
  107. obj.put("recordsFiltered", total);
  108. System.out.println(obj.toJSONString());
  109. obj.put("data", result);
  110. response.getWriter().println(obj.toJSONString());
  111. }
  112. /**
  113. * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  114. *      response)
  115. */
  116. protected void doPost(HttpServletRequest request, HttpServletResponse response)
  117. throws ServletException, IOException {
  118. doGet(request, response);
  119. }
  120. private int filter(int start,int length,String pattern){
  121. result=new LinkedList<Person>();
  122. int total=0;
  123. for(Person s:ps){
  124. if(!s.match(pattern))
  125. continue;
  126. ++total;
  127. if(start-->0)
  128. continue;
  129. if(length--<=0)
  130. continue;
  131. result.add(s);
  132. }
  133. return total;
  134. }
  135. public static void main(String[] rags) {
  136. System.out.println(JSON.toJSONString(ps));
  137. DataLoad load=new DataLoad();
  138. load.filter(0, 10, "");
  139. System.out.println(JSON.toJSONString(load.getResult()));
  140. load.filter(0, 10, "a");
  141. System.out.println(JSON.toJSONString(load.getResult()));
  142. load.filter(10, 10, "a");
  143. System.out.println(JSON.toJSONString(load.getResult()));
  144. load.filter(20, 10, "a");
  145. System.out.println(JSON.toJSONString(load.getResult()));
  146. }
  147. }

服务端返回的JSON数据如下所示。其中draw是请求中的draw参数，data是表格中的数据。recordsFiltered是过滤后的数据总数，recordsTotal是原始数据总数。

  1. {"recordsFiltered":2512,
  2. "data":[{"firstName":"Bzf","id":1,"lastName":"Hazkm"},{"firstName":"Imxi","id":2,"lastName":"Oieb"},{"firstName":"Glyag","id":3,"lastName":"Gvqlf"},{"firstName":"Lwbhl","id":4,"lastName":"Fvvf"},{"firstName":"Audds","id":5,"lastName":"Seunp"},{"firstName":"Otbrq","id":6,"lastName":"Hnal"},{"firstName":"Loji","id":7,"lastName":"Qicn"},{"firstName":"Rjy","id":8,"lastName":"Emrygr"},{"firstName":"Gcglkd","id":9,"lastName":"Ldgrs"},{"firstName":"Txh","id":10,"lastName":"Qwe"}],
  3. "draw":"1",
  4. "recordsTotal":2512}

返回数据后，网页如下所示。

dataTables使用ajax请求显示数据的更多相关文章

  1. Ajax请求后台数据

    一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

  2. ajax请求返回数据，模板中的数据处理

    /*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开 ...

  3. 关于使用Ajax请求json数据，@RequestMapping返回中文乱码的几种解决办法

    一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...

  4. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  5. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  6. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  7. 关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法

    前言:做项目的时候我用ajax请求json数据,遍历使用数据时却发现页面无响应.关于这个问题今天有个朋友又问了我一次,记录一下.由于我没有记录,这里用我朋友的图片. 代码现象: 这里他是使用alert ...

  8. bootstrap通过ajax请求JSON数据后填充到模态框

    1.   JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...

  9. AJAX请求提交数据

    1,AJAX准备知识:JSON JSON指的是JavaScript对象表示方法(JavaScript Object Notation) JSON是轻量级的文本数据交换格式 JSON独立于语言 JSON ...

随机推荐

  1. WWDC2014苹果的“软件”发布会

    WWDC 2014 苹果的"软件"发布会 在今年的 6 月 2 日到 6 日,苹果照例举行了一年一次的全球开发者大会(World Wide Developer Conference ...

  2. 一套Tomcat处理多个域名请求 - Virtual Host

    最近和Tomcat较上劲了... 作为Tomcat的系列之一,来尝试下如何用一套Tomcat来处理多个域名请求. 场景:基于成本考虑,多个department共用一台服务器,然后该服务器上就一套Tom ...

  3. iOS用户是否打开APP通知开关跳转到系统的设置界面

    1.检测用户是否打开推送通知  /** 系统通知是否打开 @return 是否打开 */ //检测通知是否打开iOS8以后有所变化 所以需要适配iOS7 + (BOOL)openThePushNoti ...

  4. EasyDarwin做转发延时太大?

    很多人反映,在用EasyDarwin做流媒体转发服务时,延时太大,实际Darwin在转发模块中,有一个控制转发Buffer时间的配置reflector_buffer_size_sec,我们将这个配置改 ...

  5. 红黑树深入剖析及Java实现（转自知乎美团点评技术团队）

    作者:美团点评技术团队 链接:https://zhuanlan.zhihu.com/p/24367771 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 红黑树是平衡 ...

  6. difference between http get and post

    1 用get的地方 在浏览器中输入url直接访问资源时,用get.get是通过url传参的. 2 用post的地方 2.1 url长度超限时 post是将参数放在http body中的,因此对参数的长 ...

  7. ElasticSearch（十三） bulk api奇特的json格式的原因

    bulk api的语法 正常的语法: {"action": {"meta"}}\n {"data"}\n {"action&quo ...

  8. mongodb学习之：副本集

    前面一张介绍了主从模式,现在mongoDB官方已经不建议使用主从模式了,替代方案是采用副本集的模式.副本集不能在一台电脑上操作.需要准备3台电脑进行搭建.副本集就是mongoDB副本所组成的一个集群. ...

  9. Uninstall Tool3.5.3

    2.卸载所有和MySQL相关的程序,有好几个,注意,一定要删除与MySQL相关的所有的数据,不能用MySQL自带的卸载,我是用Uninstall Tool3.5.3,在卸载程序界面,右键选择与MySQ ...

  10. php MVC原理

    一直用php的mvc模式,但是一直没深入研究其原理性的东西,今天把最基本的mvc原理模型总结如下: 1.url访问方式  http://127.0.0.1:8080/ceshi.com/index.p ...