jQuery EasyUI datagrid實現本地分頁簡單介紹

admin發表於2017-03-31
jQueryUI

本章節介紹了jQuery EasyUI datagrid實現本地分頁的方法,以例項形式較為詳細的分析了本地分頁的原理與相關的實現技巧。

一般分頁都是後臺做，但是有的時候還是有這種需求。

這裡重點用到了pagination的監聽，以及JS陣列的slice方法來完成。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>
<link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript"> 
// 表格資料來源 
var data = []; 
// 用程式碼造30條資料 
for (var i = 1; i < 31; ++i) { 
  data.push({ 
    "id":i, 
    "name":"Student" + i 
  }) 
} 
$(function () { 
  $("#dd").datagrid({ 
    title:"測試本地分頁", 
    rownumbers:true, 
    fitColumns:true, 
    pagination:true, 
    data:data.slice(0,10), 
    columns:[ 
      [ 
        {field:'id', align:"center", title:"編號",width:100},
        {field:'name', align:"center", title:"姓名",width:100}
      ] 
    ] 
  }); 
  var pager = $("#dd").datagrid("getPager"); 
  pager.pagination({ 
    total:data.length, 
    onSelectPage:function (pageNo, pageSize) { 
      var start = (pageNo - 1) * pageSize; 
      var end = start + pageSize; 
      $("#dd").datagrid("loadData", data.slice(start, end)); 
      pager.pagination('refresh', { 
        total:data.length, 
        pageNumber:pageNo 
      }); 
    } 
  }); 
}); 
</script>
</head>
<body>
<div id="dd"></div>
</body>
</html>

執行效果如下圖所示:

a:3:{s:3:\"pic\";s:43:\"portal/201703/31/140657m8d25gkcwkkhh282.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章