jquery datatable真实示例

  1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3 <html>
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6 <title>datatable服务端示例页面</title>
  7 <link rel="stylesheet" type="text/css" media="screen" href="lib/datatable/media/css/jquery.dataTables.css" rel="external nofollow" >
  8 <%@ include file="common/commonHeader.jsp"%>
  9 <script type="text/javascript" src="lib/datatable/media/js/jquery.js"></script>
 10 <script type="text/javascript" src="lib/datatable/media/js/jquery.dataTables.js"></script>
 11 <style type="text/css">
 12     .toolbar {
 13         float: left;
 14     }
 15     .dtselected{
 16         background-image:url('lib/datatable/media/images/dtSelected.png');
 17         background-repeat:repeat-x;
 18     }
 19
 20 <input type="checkbox" class="checkbox"
 21 </style>
 22 <script type="text/javascript">
 23
 24     /*JS生成table*/
 25     var dataSet = [['张三','男','研发二部','13768451236','<a>删除</a>'],['李四','男','研发二部','15826457981','<a>删除</a>']];
 26     $(document).ready(function() {
 27              $('#jsGenerate').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="jsTable"></table>' );
 28             $('#jsTable').dataTable( {
 29                 "data": dataSet,//数据集
 30                 "columns": [
 31                     { "title": "姓名" },
 32                     { "title": "性别" },
 33                     { "title": "部门" },
 34                     { "title": "联系方式", "class": "center" },
 35                     { "title": "操作", "class": "center" }
 36                 ],
 37                 "searching": false,//是否展示搜索器
 38                 "info": true,//分页提示信息展示
 39                 "pagingType": "full_numbers"//分页样式
 40             } );
 41     } );
 42
 43
 44     /*服务端请求数据生成table*/
 45     geneServerTable();
 46     function geneServerTable(){
 47         var selected = [];
 48         var t = $('#serverDataTable').dataTable( {
 49             "stateSave": true,//保存状态到cookie ******很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。
 50             "paging": true,//是否启用分页
 51             "ordering": true,//是否启用排序
 52             "searching": true,//是否展示搜索器
 53             "info": true,//是否展示分页提示信息
 54             "order": [[ 3, "desc" ]],//默认排序规则
 55             "pagingType": "full_numbers",//分页样式
 56             "autoWidth": false,//列的宽度会根据table的宽度自适应
 57             "processing": true,//是否显示正在处理的提示
 58             "serverSide": true,//是否启用服务器端异步请求
 59             "ajax": "getTableData.do",//请求
 60             "dom": '<"toolbar">frtilp',//工具条和布局
 61             "language": {//汉化
 62                 "url":"lib/datatable/i18n.txt"
 63             },
 64             "columns": [//展示列
 65                         { "data":null},
 66                         { "data": "name","width":"20%"},
 67                         { "data": "gender"},
 68                         { "data":null}
 69                     ],
 70             "columnDefs": [ //列属性定义
 71                             {
 72                                 "render": function ( data, type, row ) {
 73                                     return '<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  onclick="deleteRow(' + row.id + ');">删除</a> <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  onclick="modifyRow(' + row.id + ');">修改</a>';
 74                                 },
 75                                 "targets": 3
 76                             },
 77                               {
 78                               "visible": true,//列是否可见
 79                               "searchable": false,
 80                               "targets": 1
 81                               },
 82                               {
 83                                   "render": function ( data, type, row ) {
 84                                       return '&nbsp;&nbsp;<input type="checkbox" value="' + data.id + '" title="' + data.id + '" name="ck"/>';
 85                                   },
 86                                   "targets": 0
 87                               }
 88                       ],
 89             "initComplete": function(settings, json) {//回调函数，原因：异步请求
 90                 addEvent();//事件
 91             }
 92         } );
 93     }
 94
 95     /*事件*/
 96     function addEvent(){
 97         /*工具条*/
 98         $("div.toolbar").append('<input id="addRow" type="button" class="btn btn-primary btn-sm" onclick="alert(111);" value="新增"/>');
 99         $("div.toolbar").append('&nbsp;&nbsp;<input id="getSelected" type="button" class="btn btn-primary btn-sm" onclick="getSelected();" value="获取选中"/>');
100
101         /*双击事件*/
102         $('#serverDataTable tbody').on('dblclick', 'tr', function () {
103             var name = $('td', this).eq(1).text();
104             alert( '点击了 \'' + name + '\' 行' );
105         });
106
107         /*单击事件*/
108         $('#serverDataTable tbody').on('click', 'tr', function () {
109             //$(this).children().toggleClass("dtselected");
110             var checkObj = $(this).children().first().children();
111             if (checkObj.attr("checked") == true || checkObj.attr("checked") == "checked") {
112                 checkObj.attr("checked", false);
113                 checkObj.removeAttr("checked");
114             } else {
115                 checkObj.attr("checked", true);
116             }
117         });
118     }
119
120     /*获取选中*/
121     function getSelected(){
122         var spCodesTemp = "";
123         $('#serverDataTable tbody input:checkbox[name=ck]:checked').each(function(i){
124               if(0==i){
125                 spCodesTemp = $(this).val();
126               }else{
127                    spCodesTemp += (","+$(this).val());
128              }
129         });
130         alert("选中行的ID是：" + spCodesTemp);
131     }
132
133     /*删除事件*/
134     function deleteRow(id){
135         alert("本行数据的ID是：" + id);
136     }
137
138     /*修改事件*/
139     function modifyRow(id){
140         alert("本行数据的ID是：" + id);
141     }
142 </script>
143 </head>
144 <body>
145     <!--  <b>示例一：根据js对象生成table</b>
146     <div id="jsGenerate" style="margin-top:20px"></div>-->
147     <br>
148     <br>
149     <!--  <b>示例二：从服务端请求数据生成table</b>-->
150     <!-- table table-striped table-bordered table-hover dataTable -->
151     <table id="serverDataTable" class="table-striped table-bordered table-hover" style="margin-top:20px;" cellspacing="0" width="100%">
152         <thead>
153             <tr>
154                 <th width="16px;"></th>
155                 <th>姓名</th>
156                 <th>性别</th>
157                 <th>操作</th>
158             </tr>
159         </thead>
160     </table>
161
162 </body>
163 </html>

@RequestMapping("getTableData")
    public ModelAndView getTableData(HttpServletRequest request, HttpServletResponse response) throws Exception {
//1.分页参数
int pageSize = 10;//页面显示数量
int startRecord = 0;//开始记录位置
String size = request.getParameter("length");
if (!"".equals(size) && size != null) {
    pageSize = Integer.parseInt(size);
}
String currentRecord = request.getParameter("start");
if (!"".equals(currentRecord) && currentRecord != null) {
    startRecord = Integer.parseInt(currentRecord);
}//2.排序参数
String sortColumn = request.getParameter("order[0][column]");//因为是二维的表格，因此只有一维需要排序，所以 order 的下标未 0. 该属性表示第几列需要排序。
String sortDir = request.getParameter("order[0][dir]");//排序方式 ASC | DESC //3.搜索参数
String searchValue = request.getParameter("search[value]");//search 输入框中的值System.out.println("----->sortColumn:" + sortColumn + "------>sortDir:" + sortDir + "---->searchValue:" + searchValue);//所有参数
//Enumeration<String> paraNames = request.getParameterNames();
//for(Enumeration e=paraNames;e.hasMoreElements();){
//       String thisName=e.nextElement().toString();
//       String thisValue=request.getParameter(thisName);
//       System.out.println(thisName + "--------------> " + thisValue);
//}//JSONArray userData = userService.pageGetUserData(startRecord,pageSize，columnsName[Integer.parseInt(sortColumn)], sortDir, searchValue);//4.获取后台数据
JSONArray arr = new JSONArray();
int count = 15;
//假分页数据
for (int i = 0; i < 15; i++) {
if (startRecord < 10 && i < 10){//第一页
JSONObject obj = new JSONObject();
obj.put("id", i);
obj.put("name", "张三" + i);
obj.put("gender", "男");
arr.add(obj);
}
if(startRecord >= 10 && i >= 10){//第二页
JSONObject obj = new JSONObject();
obj.put("id", i);
obj.put("name", "张三" + i);
obj.put("gender", "男");
arr.add(obj);
}
}//5.封装要返回的数据
DataVO<Object> result = new DataVO<Object>();
result.setDraw(Integer.parseInt(request.getParameter("draw") == null ? "0" : request.getParameter("draw")) + 1);//表示请求次数
result.setData(arr);//具体的数据对象数组
result.setRecordsTotal(count);//总记录数
result.setRecordsFiltered(count);//过滤后的总记录数PrintWriter out = response.getWriter();
out.print(JSON.toJSONString(result));
    return null;
}

i18n.txt

{
    "search": "搜索:",
    "processing": "正在加载数据...",
    "lengthMenu": "每页显示  _MENU_ 条记录",
    "zeroRecords": "对不起，查询不到相关数据！",
    "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
    "infoEmpty": "表中无数据存在！",
    "infoFiltered": "数据表中共为 _MAX_ 条记录",
    "paginate": {
         "sFirst": "首页",
         "sPrevious": "上一页",
         "sNext": "下一页",
         "sLast": "尾页"
     }
}

个人收藏笔记记录

开通VIP