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. Integrate NSX into Neutron

    NSX is VMware's strategy for Software-defined networking, it was implemented purely in software, and ...

  2. oracle sqlplus 常用操作

    命令 含义 / 运行 SQL 缓冲区 ? [关键词] 对关键词提供 SQL 帮助 @[@] [文件名] [参数列表] 通过指定的参数,运行指定的命令文件 ACC[EPT] 变量 [DEF[AULT] ...

  3. iOS UILabel文字缩进

    使用NSMutableParagraphStyle实现label文字首尾的缩进 NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphSty ...

  4. 【BZOJ1844/2210】Pku1379 Run Away 模拟退火

    [BZOJ1844/2210]Pku1379 Run Away 题意:矩形区域中有一堆点,求矩形中一个位置使得它到所有点的距离的最小值最大. 题解:模拟退火的裸题,再调调调调调参就行了~ #inclu ...

  5. [usaco2009nov]奶牛的图片

    Farmer John希望给他的N(1<=N<=100,000)只奶牛拍照片,这样他就可以向他的朋友炫耀他的奶牛.这N只奶牛被标号为1..N.在照相的那一天,奶牛们排成了一排.其中第i个位 ...

  6. android4.3 蓝牙BLE编程

    一.蓝牙4.0简介 蓝牙4.0标准包含两个蓝牙标准,准确的说,是一个双模的标准,它包含传统蓝牙部分(也有称之为经典蓝牙Classic Bluetooth)和低功耗蓝牙部分(Bluetooth Low ...

  7. 关于<context:annotation-config/>配置

    对于spring项目的一些配置,一直感到有些混乱,今天看到一前辈总结的特别好,把自己的理解贴在这里,有不当的地方,后续继续学习: 当我们使用@Autowired.@Required等这些注解时,就要在 ...

  8. 向HTML页面传入参数

    这次是想将参数传入HTML页面,通过js获取参数信息,动态生成HTML页面内容: 方法一: <script> function GetArgsFromHref(sHref, sArgNam ...

  9. Codeforces Round #371 (Div. 2) C. Sonya and Queries —— 二进制压缩

    题目链接:http://codeforces.com/contest/714/problem/C C. Sonya and Queries time limit per test 1 second m ...

  10. U盘安装Ubuntu 14.04 LTS正式版

    Ubuntu 14.04 LTS正式版发布,而且提供五年的支持和维护服务.Ubuntu 14.04是Ubuntu开发团队历经五年的心血之作.许多新手都喜欢把Linux安装文件刻录成光盘再安装,而安装好 ...