jQuery EasyUI Datagrid-Methode zur Implementierung lokaler paging

jQuery EasyUI Datagrid-Methode zur Implementierung lokaler paging_jquery

WBOY

Freigeben： 2016-05-16 16:14:21

Original

1007 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie das jQuery EasyUI-Datagrid lokales Paging implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Im Allgemeinen erfolgt das Paging im Hintergrund und es ist unangemessen, es im Frontend durchzuführen, egal welchen Aspekt Sie berücksichtigen. Aber manchmal besteht immer noch ein solcher Bedarf.

Der Schlüssel hier besteht darin, die Überwachung der Paginierung und die Slice-Methode des JS-Arrays zu verwenden, um den Vorgang abzuschließen. Der Code lautet wie folgt:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"/> 
  <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>

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.