zoukankan      html  css  js  c++  java

  • dataTables使用ajax请求显示数据

    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}  


    返回数据后，网页如下所示。
  • 相关阅读:
    深拷贝与浅拷贝
    ifconfig命令不可用
    多边形裁剪问题
    ps aux命令后的内容
    STL sort的危险之处
    jdk与jre的区别
    #与##的用法
    投影选择的一般原则
    关于函数中内存操作
    js生成新加坡的NRIC号码
  • 原文地址：https://www.cnblogs.com/keyi/p/7234509.html
Copyright © 2011-2022 走看看