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. C语言各种keyword

    1.register 在函数内定义变量时.默认是 auto 类型,变量存储在内存中,当程序用到该变量时,由控制器发出指令将内存中该变量的值送到运算器,计算结束后再从运算器将数据送到内存.假设一个变量用 ...

  2. UiAutomator源代码分析之获取控件信息

    依据上一篇文章<UiAutomator源代码分析之注入事件>開始时提到的计划,这一篇文章我们要分析的是第二点: 怎样获取控件信息 我们在測试脚本中初始化一个UiObject的时候一般是像下 ...

  3. Ubuntu16.04下屏幕侧边栏的设置

    ubnutu的任务栏都是在左侧: zhang@zhang-virtual-machine:~$ gsettings set com.canonical.Unity.Launcher launcher- ...

  4. 区分拖曳(drag)和点击(click)事件

    假设页面上有一个a标签: <a href="http://www.google.com">google</a> 现在需要对这个标签进行拖放操作,会发现当拖曳 ...

  5. SQLMAP源码分析（一）

    说起来,学习Python很大一部分原因是由于对WEB安全的兴趣以及对SQLMAP这款工具的好奇,曾经设想学完Python基础就读一读SQLMAP源码,然而懒病一犯,随之就大江东去.近来,又重新燃起了读 ...

  6. celery模块

    Celery Celery是管理分布式任务队列的工具,其本身并不是任务队列. Celery常见概念有brokers.backend.workers.tasks. brokers:中间人,是Celery ...

  7. FFmpeg编码详细流程

    FFmpeg在编码一个视频的时候的函数调用流程.为了保证结构清晰,其中仅列出了最关键的函数,剔除了其它不是特别重要的函数. 函数背景色 函数在图中以方框的形式表现出来.不同的背景色标志了该函数不同的作 ...

  8. Lance老师UI系列教程第九课->高仿比特币监控大师

    http://blog.csdn.net/lancees/article/details/22898971

  9. Leetcode 001-twosum

    #Given an array of integers, return indices of the two numbers such that they add up to a specific t ...

  10. 程序猿的量化交易之路（27）--Cointrader之PriceData价格数据（14）

    转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrade.top/ PriceData:价格数据.价格数据 ...