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. css实现轮播效果图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 在Fedora24/25中轻松安装gcc 4.9

    在Fedora24/25中轻松安装gcc 4.9 http://blog.csdn.net/u010158659/article/details/53608285 标签: gccgcc-4.9Fedo ...

  3. mysql中索引的使用

    索引是加速查询的主要手段,特别对于涉及多个表的查询更是如此.本节中,将介绍索引的作用.特点,以及创建和删除索引的语法. 使用索引优化查询 索引是快速定位数据的技术,首先通过一个示例来了解其含义及作用. ...

  4. Java类加载器(死磕 1-2)

      Java类加载器(  CLassLoader ) 死磕 1.2:  导入 & 类加载器分类 本小节目录 1.导入 1.1. 从class文件的载入开始 1.2. 什么是类加载器 2. JA ...

  5. git文章列表

    关于gitlab默认clone协议 Git实现从本地加入项目到远程仓库 翻翻git之---一个简单的标签控件 LabelView (随手发了两张小宝宝的玩耍照) id=1125" targe ...

  6. Linux就该这么学--命令集合6（打包压缩文件、文件查询搜索命令）

    1.tar命令用于对文件打包压缩或解压:(tar [选项] [文件]) 打包并压缩文件:tar -czvf 压缩包名.tar.gz 文件名 解压并展开压缩包:tar -xzvf 压缩包名.tar.gz ...

  7. 有关SharedPreference的使用

    1.不要使你的文件过大 Sp 在创建的时候会吧整个xml问文件全部载入内存,如果你的文件比较大: 1.第一次从sp取值时,会阻塞主线程,使页面卡顿. 2.解析sp的时候会产生大量的临时对象,导致频繁G ...

  8. HDU5950 Recursive sequence —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/HDU-5950 Recursive sequence Time Limit: 2000/1000 MS (Java/Others)   ...

  9. centos 配置

    安装 node 源地址: http://my.oschina.net/blogshi/blog/260953 (一) 编译好的文件 简单说就是解压后,在bin文件夹中已经存在node以及npm,如果你 ...

  10. linux命令行快捷键记录

    摘自: http://www.cnblogs.com/webzhangnan/p/3221410.html [移动光标] Ctrl+A 标移到行首.它在多数文本编辑器和 Mozilla 的 URL 字 ...