JQuery.DataTables

1.引用jquery.datatables.js

2.在页面配置datatable

  下面是没有在服务器端启用分页，获取所有数据，客户端自动分页

  $(".data-table").dataTable({
                    "bDestory": true,//清除数据源
                    "bRetrieve": true,
                    "bPaginate": true, //开关，是否显示分页器
                    //                "bInfo": true, //开关，是否显示表格的一些信息
                    "bFilter": false, //开关，是否启用客户端过滤器
                    //                "bAutoWith": false,
                    //                "bDeferRender": false,
                    "bJQueryUI": true, //开关，是否启用JQueryUI风格
                    "bLengthChange": false, //开关，是否显示每页大小的下拉框
                    //"bProcessing": true,
                    "bServerSide": false,//是否启用服务器端分页
                    //                "bScrollInfinite": false,
                    //                "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
                    //                "bSort": true, //开关，是否启用各列具有按列排序的功能
                    //                "bSortClasses": true,
                    //"bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的， 打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列
                    //                "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
                    //                "aaSorting": [[0, "asc"]],

                    //                "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列

                    "sAjaxSource": "../Tools/getTable.ashx?time=" + time + "&&shoplist=" + shoplist,
                    //sEcho=3&iDisplayStart=1&iDisplayLength=2&iSortingCols=1&sSearch=false&iColumns=4&sColumns=sysType,userCode,sysMsg,sysIP,sysTime",
                    "sDom": '<""l>t<"F"fp>',
                    "bAutoWidth": false, //自适应宽度
                    "aaSorting": [[1, "asc"]],
                    "sPaginationType": "full_numbers",
                    "oLanguage": {
                        "iDisplayLength": 2,
                        "sProcessing": "正在加载中......",
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "对不起，查询不到相关数据！",
                        "sEmptyTable": "表中无数据存在！",
                        "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                        "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                        "sSearch": "搜索",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上一页",
                            "sNext": "下一页",
                            "sLast": "末页"
                        }
                    } //多语言配置
                }).fnDestroy();

　　

"bDestory": true,//清除数据源
"bRetrieve": true,

fnDestroy()
以上三个配置后，才能动态查询

在服务器端启用分页，将 "bServerSide"设置为true，会传递参数到服务器端