AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

dataTables使用ajax请求显示数据

2017-07-25 1750
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： dataTables是一种很好用前端表格显示库。当加载大量数据时，可以用Ajax 获取数据来提高效率，增速网页加载速率。下面以一个例子作示范。首先，需要下载jQuery以及dataTables库。这里使用的是版本是jquery v1.11.3和DataTables 1.10.9。

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

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

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

 

[html]  view plain  copy
 
  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.   
  11.     $(document).ready(function() {  
  12.         $("#datatable").dataTable({  
  13.             "processing" : true,  
  14.             "serverSide" : true,  
  15.             "paginationType":"full_numbers",  
  16.             "ajax" : "load",  
  17.             "columns" : [   
  18.                 {"data" : "id"},  
  19.                 {"data" : "firstName"},  
  20.                 {"data" : "lastName"}  
  21.                 ]  
  22.         });  
  23.     });  
  24. </script>  
  25. <style>  
  26. h2{  
  27. text-align:center;  
  28. }  
  29. div {  
  30.     float: left;  
  31.     margin: 10px;  
  32.     padding: 4px;  
  33. }  
  34. a{  
  35. margin:5px;  
  36. }  
  37. table,tr,td,th{  
  38. border:2px solid #3aec7b;  
  39. border-collapse:collapse;  
  40. }  
  41.   
  42. </style>  
  43. </head>  
  44.     <body>  
  45.       
  46.         <TABLE id="datatable">  
  47.             <THEAD>  
  48.                 <tr>  
  49.                     <th>ID</th>  
  50.                     <th>First Name</th>  
  51.                     <th>Last Name</th>  
  52.                 </tr>  
  53.             </THEAD>  
  54.             <tbody>  
  55.             </tbody>  
  56.         </TABLE>  
  57.     </body>  
  58. </html>  


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

 

 

[html]  view plain  copy
 
  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。

代码如下所示。

 

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


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

 

 

[html]  view plain  copy
 
  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}  


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

 

文章标签：
Java
Web App开发
前端开发
JavaScript
数据格式
关键词：
ajax请求
ajax数据
ajax.js数据
ajax.js请求
datatables ajax
ke_ry
目录
相关文章
大树营养快线
|
3天前
|
XML 前端开发 JavaScript
ajax请求详细怎么实现，和其中的响应状态
【10月更文挑战第29天】
大树营养快线
20 3
刘大猫.
|
20天前
|
JSON JavaScript 前端开发
《进阶篇第6章：vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章：vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
刘大猫.
55 22
刘大猫.
|
20天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
36 18
刘大猫.
|
20天前
|
前端开发 JavaScript Java
第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）
第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）
刘大猫.
47 4
dufadayang
|
29天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
dufadayang
68 1
尹正杰
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例，展示了如何通过这些库发送GET和POST请求，并处理响应和错误。
尹正杰
51 10
React技术栈-react使用的Ajax请求库实战案例
尹正杰
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库（如axios）进行用户搜索的实战案例，包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
尹正杰
31 7
React技术栈-react使用的Ajax请求库用户搜索案例
杀死一只知更鸟debug
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总，dom操作，ajax请求
本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
杀死一只知更鸟debug
23 2
蓝易云
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式：使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式，适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API，使用起来更为简洁，但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式，它们都能有效地在Vue应用中实现Ajax请求的功能。
蓝易云
36 4
bruce刘晓伟-18435
|
1月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取（一）
Python编程—Ajax数据爬取（一）
bruce刘晓伟-18435
39 0