DataTables基本搭建攻略（后台分页）

1. var docrTable = $('#docrevisontable').dataTable({
   
2.             "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
   
3.             "bServerSide" : true, //是否启动服务器端数据导入
   
4.             "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
   
5.             "bJQueryUI" : true, //是否使用 jQury的UI theme
   
6.             "sScrollY" : 450, //DataTables的高
   
7.             "sScrollX" : 820, //DataTables的宽
   
8.             "aLengthMenu" : [20, 40, 60], //更改显示记录数选项
   
9.             "iDisplayLength" : 40, //默认显示的记录数
   
10.             "bAutoWidth" : false, //是否自适应宽度
    
11.             //"bScrollInfinite" : false, //是否启动初始化滚动条
    
12.             "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
    
13.             "bPaginate" : true, //是否显示（应用）分页器
    
14.             "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
    
15.             "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
    
16.             "bSort" : true, //是否启动各个字段的排序功能
    
17.             "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列
    
18.             "bFilter" : true, //是否启动过滤、搜索功能
    
19.                     "aoColumns" : [{
    
20.                         "mDataProp" : "USERID",
    
21.                         "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
    
22.                         "bVisible" : false //此列不显示
    
23.                     }, {
    
24.                         "mDataProp" : "USERNAME",
    
25.                         "sTitle" : "用户名",
    
26.                         "sDefaultContent" : "",
    
27.                         "sClass" : "center"
    
28.                     }, {
    
29.                         "mDataProp" : "EMAIL",
    
30.                         "sTitle" : "电子邮箱",
    
31.                         "sDefaultContent" : "",
    
32.                         "sClass" : "center"
    
33.                     }, {
    
34.                         "mDataProp" : "MOBILE",
    
35.                         "sTitle" : "手机",
    
36.                         "sDefaultContent" : "",
    
37.                         "sClass" : "center"
    
38.                     }, {
    
39.                         "mDataProp" : "PHONE",
    
40.                         "sTitle" : "座机",
    
41.                         "sDefaultContent" : "",
    
42.                         "sClass" : "center"
    
43.                     },

1. {
   
2.                         "mDataProp" : "NAME",
   
3.                         "sTitle" : "姓名",
   
4.                         "sDefaultContent" : "",
   
5.                         "sClass" : "center"
   
6.                     }, {
   
7.                         "mDataProp" : "ISADMIN",
   
8.                         "sTitle" : "用户权限",
   
9.                         "sDefaultContent" : "",
   
10.                         "sClass" : "center"
    
11.                     }],
    
12.                     "oLanguage": { //国际化配置
    
13.                 "sProcessing" : "正在获取数据，请稍后...",  
    
14.                 "sLengthMenu" : "显示 _MENU_ 条",  
    
15.                 "sZeroRecords" : "没有您要搜索的内容",  
    
16.                 "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",  
    
17.                 "sInfoEmpty" : "记录数为0",  
    
18.                 "sInfoFiltered" : "(全部记录数 _MAX_ 条)",  
    
19.                 "sInfoPostFix" : "",  
    
20.                 "sSearch" : "搜索",  
    
21.                 "sUrl" : "",  
    
22.                 "oPaginate": {  
    
23.                     "sFirst" : "第一页",  
    
24.                     "sPrevious" : "上一页",  
    
25.                     "sNext" : "下一页",  
    
26.                     "sLast" : "最后一页"  
    
27.                 }
    
28.             },
    
29.                     
    
30.                     "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
    
31.                         /* 用来改写用户权限的 */
    
32.                         if (aData.ISADMIN == '1')
    
33.                             $('td:eq(5)', nRow).html('管理员');
    
34.                         if (aData.ISADMIN == '2')
    
35.                             $('td:eq(5)', nRow).html('资料下载');
    
36.                         if (aData.ISADMIN == '3')
    
37.                             $('td:eq(5)', nRow).html('一般用户');
    
38.                         
    
39.                         return nRow;
    

1.                     },
2. 1. "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
      
   2.                         //服务器端，数据回调处理
      
   3.                             "fnServerData" : function(sSource, aDataSet, fnCallback) {
      
   4.                                 $.ajax({
      
   5.                                     "dataType" : 'json',
      
   6.                                     "type" : "POST",
      
   7.                                     "url" : sSource,
      
   8.                                     "data" : aDataSet,
      
   9.                                     "success" : fnCallback
      
   10.                                 });
       
   11.                             }
       
   12.                 });
       
   13.                 
       
   14.                 $("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
       
   15.                     $(docrTable.fnSettings().aoData).each(function() {
       
   16.                         $(this.nTr).removeClass('row_selected');
       
   17.                     });
       
   18.                     $(event.target.parentNode).addClass('row_selected');
       
   19.                     var aData = docrTable.fnGetData(event.target.parentNode);
       
   20.                     
       
   21.                     $("#userId").val(aData.USERID);
       
   22.                     $("#userN").val(aData.USERNAME);
       
   23.                 });
       
   24.                 
       
   25.                 $('#docrevisontable_filter').html('<span>用户管理列表');
       
   26.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="创建"/>');
       
   27.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="修改"/>');
       
   28.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="删除"/>');
       
   29.                 $('#docrevisontable_filter').append('</span>');
       
   30.         }
   参考链接 http://blog.csdn.net/lengyue1084/article/details/9309899