2019独角兽企业重金招聘Python工程师标准>>>

Html代码 

1. <table class="display" id="customerInfo">
2. <thead>
3. <tr>
4. <th>ID</th>
5. 略
6. <th>身高</th>
7. </tr>
8. </thead>
9. <tbody>
10. <tr>
11. <td colspan="8"></td>
12. </tr>
13. </tbody>
14. <tfoot>
15. <tr>
16. <th>ID</th>
17. 略
18. <th>身高</th>
19. </tr>
20. </tfoot>
21. </table>

Javascript代码 

1. $('#customerInfo').dataTable();

Javascript代码 

1. function retrieveData( sSource, aoData, fnCallback ) {
2. //将客户名称加入参数数组
3. aoData.push( { "name": "customerName", "value": $("#customerName").val() } );
4. $.ajax( {
5. "type": "POST",
6. "contentType": "application/json",
7. "url": sSource,
8. "dataType": "json",
9. "data": JSON.stringify(aoData), //以json格式传递
10. "success": function(resp) {
11. fnCallback(resp.returnObject); //服务器端返回的对象的returnObject部分是要求的格式
12. }
13. });
14. }

Javascript代码 

1. var oTable = null;
2. $(function() {
3. $("#customerInfo").hide();
4. } );
5. //“检索”按钮的处理函数
6. function search() {
7. if (oTable == null) { //仅第一次检索时初始化Datatable
8. $("#customerInfo").show();
9. oTable = $('#customerInfo').dataTable( {
10. "bAutoWidth": false,                    //不自动计算列宽度
11. "aoColumns": [                          //设定各列宽度
12. {"sWidth": "15px"},
13. {"sWidth": "80px"},
14. {"sWidth": "160px"},
15. {"sWidth": "110px"},
16. {"sWidth": "120px"},
17. {"sWidth": "140px"},
18. {"sWidth": "140px"},
19. {"sWidth": "*"}
20. ],
21. "bProcessing": true,                    //加载数据时显示正在加载信息
22. "bServerSide": true,                    //指定从服务器端获取数据
23. "bFilter": false,                       //不使用过滤功能
24. "bLengthChange": false,                 //用户不可改变每页显示数量
25. "iDisplayLength": 8,                    //每页显示8条数据
26. "sAjaxSource": "customerInfo/search.do",//获取数据的url
27. "fnServerData": retrieveData,           //获取数据的处理函数
28. "sPaginationType": "full_numbers",      //翻页界面类型
29. "oLanguage": {                          //汉化
30. "sLengthMenu": "每页显示 _MENU_ 条记录",
31. "sZeroRecords": "没有检索到数据",
32. "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
33. "sInfoEmtpy": "没有数据",
34. "sProcessing": "正在加载数据...",
35. "oPaginate": {
36. "sFirst": "首页",
37. "sPrevious": "前页",
38. "sNext": "后页",
39. "sLast": "尾页"
40. }
41. }
42. });
43. }
44. //刷新Datatable，会自动激发retrieveData
45. oTable.fnDraw();
46. }

Java代码 

1. public class JSONParam {
2. private String name;
3. private String value;
4. //略
5. }

Java代码 

1. @RequestMapping(value = "/search", method = RequestMethod.POST)
2. @ResponseBody
3. public JSONResponse search(@RequestBody JSONParam[] params){
4. //略
5. }

Java代码 

1. public class DataTableReturnObject {
2. private long iTotalRecords;
3. private long iTotalDisplayRecords;
4. private String sEcho;
5. private String[][] aaData;
6. public DataTableReturnObject(long totalRecords, long totalDisplayRecords, String echo, String[][] d) {
7. //略
8. }
9. //略
10. }

Java代码 

1. @RequestMapping(value = "/search", method = RequestMethod.POST)
2. @ResponseBody
3. public JSONResponse search(@RequestBody JSONParam[] params) throws IllegalAccessException, InvocationTargetException
4. //convertToMap定义于父类，将参数数组中的所有元素加入一个HashMap
5. HashMap<String, String> paramMap = convertToMap(params);
6. String sEcho = paramMap.get("sEcho");
7. String customerName = paramMap.get("customerName");
8. int start = Integer.parseInt(paramMap.get("iDisplayStart"));
9. int length = Integer.parseInt(paramMap.get("iDisplayLength"));
10. //customerService.search返回的第一个元素是满足查询条件的记录总数，后面的是
11. //页面当前页需要显示的记录数据
12. List<Object> customerList = customerService.search(customerName, start, length);
13. Long count = (Long)customerList.get(0);
14. //将查询结果转换为一个二维数组
15. int record = customerList.size() - 1;
16. String[][] data = new String[record][];
17. for(int i=0; i<record; i++) {
18. Customer customer = (Customer)customerList.get(i+1);
19. JSONCustomer jsonCustomer = new JSONCustomer();
20. BeanUtils.copyProperties(jsonCustomer, customer);
21. data[i] = jsonCustomer.toArray();
22. }
23. return successed(new DataTableReturnObject(count.longValue(), count.longValue(), sEcho, data));
24. }