代码改变世界

Jquery中datatables插件的使用示例

2012-09-22 15:45  C#与.NET探索者  阅读(1209)  评论(0)  编辑  收藏  举报

datatables fnServerData进行服务器端分页

  1. $(function() { 
  2.     $('#manageDataTable').dataTable( { 
  3.         "bJQueryUI" : true, 
  4.         "iDisplayLength" : 20, 
  5.         "bProcessing" : true, 
  6.         "bServerSide" : true, 
  7.         "sPaginationType" : "full_numbers", 
  8.         "aLengthMenu" : [[20, 50, 100], ["20", "50", "100"]], 
  9.         "oLanguage" : { 
  10.             "sUrl" : "/js/table/jquery.data.table.cn.txt" 
  11.         }, 
  12.         "bStateSave" : true, 
  13.         "bRegex" : true, 
  14.         "aaSorting" : [[4, "desc"]], 
  15.         "bSort" : true, 
  16.         "aoColumnDefs" : [ { 
  17.             "sClass" : "center", 
  18.             "aTargets" : [0] 
  19.         }, { 
  20.             "bSearchable" : false, 
  21.             "aTargets" : [0, 1, 3, 4, 5] 
  22.         }, { 
  23.             "bSortable" : false, 
  24.             "aTargets" : [1, 2, 3, 5] 
  25.         }], 
  26.         "sAjaxSource" : '/config/rpc/list.json?timestamp=' 
  27.                 + new Date().getTime(), 
  28.         "fnServerData" : function(sSource, aoData, fnCallback) { 
  29.             $.ajax( { 
  30.                 dataType : 'json', 
  31.                 type : 'POST', 
  32.                 cache : false, 
  33.                 url : sSource, 
  34.                 async : false, 
  35.                 data : { 
  36.                     "aoData" : JSON.stringify(aoData) 
  37.                 }, 
  38.                 success : function(response) { 
  39.                     fnCallback(response.content); 
  40.                 } 
  41.             }); 
  42.         }, 
  43.         "aoColumns" : [ { 
  44.             "mDataProp" : "id" 
  45.         }, { 
  46.             "mDataProp" : "changeType", 
  47.             "fnRender" : function(oObj) { 
  48.                 var changeType = oObj.aData.changeType; 
  49.                 if (changeType == 0) { 
  50.                     return '初始化'; 
  51.                 } else if (changeType == 1) { 
  52.                     return '数据迁移'; 
  53.                 } else if (changeType == 2) { 
  54.                     return '容量调整'; 
  55.                 } else { 
  56.                     return 'Unknow'; 
  57.                 } 
  58.             } 
  59.         }, { 
  60.             "mDataProp" : "publishKey" 
  61.         }, { 
  62.             "mDataProp" : "isPublished", 
  63.             "fnRender" : function(oObj) { 
  64.                 var isPublished = oObj.aData.isPublished; 
  65.                 if (isPublished) { 
  66.                     return '发布成功'; 
  67.                 } else { 
  68.                     return '发布失败'; 
  69.                 } 
  70.             } 
  71.         }, { 
  72.             "mDataProp" : "gmtModified", 
  73.             "fnRender" : function(oObj) { 
  74.                 var ms = oObj.aData.gmtModified; 
  75.                 var date = new Date(); 
  76.                 date.setTime(ms); 
  77.                 return date.toLocaleString(); 
  78.             } 
  79.         }, { 
  80.             "fnRender" : function(oObj) { 
  81.                 var html = []; 
  82.                 html.push('<div><a onclick="viewConfig('+ oObj.aData.id +');" ><img src="http://images.cnblogs.com/view.png" width="20" height="20" title="查看配置详细信息" alt="查看配置详细信息"/></a></div>'); 
  83.                 html.push('<div style="display:none;width:600px;" id="'); 
  84.                 html.push(oObj.aData.id); 
  85.                 html.push('">'); 
  86.                 html.push(oObj.aData.namespaceConfig); 
  87.                 html.push('</div>'); 
  88.                 return html.join(''); 
  89.             } 
  90.         }] 
  91.     }); 
  92. }); 
  93.  
  94. function viewConfig(id){ 
  95.     var element = '#' + id; 
  96.     $.dialog({ 
  97.         title:'配置详细信息', 
  98.         content:$(element).html(), 
  99.         width:618, 
  100.         lock:true, 
  101.         cancel:true 
  102.     }); 
  103. } 

sAjaxSource：Ajax异步rpc实时请求地址，通过fnServerData函数请求，页面根据搜索内容不停的变化

mDataProp中对应着VO对象中的各个字段，名称必须与VO对象中的字段一一对应；如果使用fnRender，可以不同，

因为使用具体的数据进行渲染，而不是根据默认的名称匹配来填充数据

jquery.data.table.cn.txt中定义分页时的页面显示情况，内容如下：

  1. { 
  2.     "sProcessing" : "Loading data from server, please wait...", 
  3.     "sLengthMenu" : "显示_MENU_条 ", 
  4.     "sZeroRecords" : "没有您要搜索的内容", 
  5.     "sInfo" : "从_START_ 到 _END_ 条记录——查询到的录数为 _TOTAL_ 条", 
  6.     "sInfoEmpty" : "记录数为0", 
  7.     "sInfoFiltered" : "(全部记录数 _MAX_  条)", 
  8.     "sInfoPostFix" : "", 
  9.     "sSearch" : "搜索", 
  10.     "sUrl" : "", 
  11.     "oPaginate" : { 
  12.         "sFirst" : "第一页", 
  13.         "sPrevious" : " 上一页 ", 
  14.         "sNext" : " 下一页 ", 
  15.         "sLast" : " 最后一页 " 
  16.     } 
  17. } 

在vm模板中定义表头

  1. <div class="main"> 
  2.     <div class="title"> 
  3.         <h2>查看告警</h2> 
  4.     </div> 
  5.     <div class="setting_box"> 
  6.         <table cellpadding="0" cellspacing="0" class="display" id="manageDataTable"> 
  7.             <thead> 
  8.                 <tr> 
  9.                     <th width="50px">id</th> 
  10.                     <th width="80px">业务类型</th> 
  11.                     <th width="100px">业务id</th> 
  12.                     <th >告警信息</th> 
  13.                     <th width="200px">告警时间</th> 
  14.                     <th width="50px">操作</th> 
  15.                 </tr> 
  16.             </thead> 
  17.             <tbody> 
  18.                 <tr> 
  19.                     <td colspan="5" class="dataTables_empty">Loading data from server</td> 
  20.                 </tr> 
  21.             </tbody> 
  22.         </table> 
  23.     </div> 
  24. </div> 

这里，必须使用<thead>、<tbody>标签，datatables插件才能识别

显示的效果如下图：

 说明：

1. mDataProp表示在将要显示的页面中column中的元素

2. sProcessing, sMenuLength等第一个字母表示数据类型；如果是aa表示二维数组

Datatables两种使用方式：

1. 前台分页，直接在模板中填充数据，使用datatables插件来渲染样式；

vm模板：

  1.         <table cellpadding="0" cellspacing="0" class="display" id="manageDataTable"> 
  2.             <thead> 
  3.             <tr> 
  4.                 <th width="35px">id</th> 
  5.                 <th>名称</th> 
  6.                 <th>数据分布</th> 
  7.                 <th>Key哈希</th> 
  8.                 <th>Class Type</th> 
  9.                 <th>Group Type</th> 
  10.                 <th>序列化算法</th> 
  11.                 <th>Key摘要</th> 
  12.                 <th>节点数</th> 
  13.                 <th>Namespace数</th> 
  14.                 <th #if(!$!namespace) style="display:none;" #end>Is New</th> 
  15.                 <th width="190px" style="border-right:none">操作</th> 
  16.             </tr> 
  17.             </thead> 
  18.             <tbody> 
  19.                 #foreach($group in $groups) 
  20.                 <tr align="center"> 
  21.                     <td>$!group.id</td> 
  22.                     <td>$!group.name</td> 
  23.                     <td>$!group.visitPolicyName</td> 
  24.                     <td>$!group.hashAlgorithmName</td> 
  25.                     <td>$!group.classType</td> 
  26.                     <td> 
  27. .... 

对应的js处理

  1. $('#manageDataTable').dataTable({ 
  2.     "bJQueryUI":true, 
  3.     "iDisplayLength":20, 
  4.     "sPaginationType":"full_numbers", 
  5.     "aLengthMenu":[ 
  6.         [20, 50, 100], 
  7.         ["20", "50", "100"] 
  8.     ], 
  9.     "oLanguage":{ 
  10.         "sUrl":"/js/table/jquery.data.table.cn.txt" 
  11.     }, 
  12.     "bStateSave":true, 
  13.     "aaSorting":[ 
  14.         [0, "asc"], 
  15.         [1, "asc"] 
  16.     ], 
  17.     "bSort":true, 
  18.     "aoColumnDefs":[ 
  19.         { 
  20.             "sClass":"center", 
  21.             "aTargets":[0, 8, 9, 10] 
  22.         }, 
  23.         { 
  24.             "bSearchable":false, 
  25.             "aTargets":[0, 2, 3, 6, 7, 8, 9, 10] 
  26.         }, 
  27.         { 
  28.             "bSortable":false, 
  29.             "aTargets":[2, 3, 4, 6, 7, 10] 
  30.         }, 
  31.         { 
  32.             "sWidth":"10%", 
  33.             "aTargets":[9] 
  34.         }, 
  35.         { 
  36.             "sWidth":"13%", 
  37.             "aTargets":[10] 
  38.         } 
  39.     ] 
  40. }); 

2. 后台分页，使用ajax请求，使用上面介绍的方式

  1. "sAjaxSource" : '/config/rpc/list.json?timestamp='  
  2.         + new Date().getTime(),  
  3. "fnServerData" : function(sSource, aoData, fnCallback) {  
  4.     $.ajax( {  
  5.         dataType : 'json',  
  6.         type : 'POST',  
  7.         cache : false,  
  8.         url : sSource,  
  9.         async : false,  
  10.         data : {  
  11.             "aoData" : JSON.stringify(aoData)  
  12.         },  
  13.         success : function(response) {  
  14.             fnCallback(response.content);  
  15.         }  
  16.     });  
  17. },  

 

本文出自 “黑白灰” 博客，请务必保留此出处http://leonmau.blog.51cto.com/2202260/809523