easyui-table表格客戶端分頁例項

塵光掠影發表於2017-08-06
UI客戶端
版權宣告：本文為博主原創文章，如需轉載，請標明出處。 https://blog.csdn.net/alan_liuyue/article/details/76783083
一、前言

    前一篇部落格已經介紹了bootstrap-table的客戶端分頁，而本篇部落格將會介紹另一種外掛分頁—easyui-table；

easyui-table也是是非常方便好用的前端表格分頁外掛，使用者只需要提供資料來源就能實現非常完美的分頁

效果，其分頁方式可以分成客戶端分頁和服務端分頁，其接收的資料來源都是json資料格式。服務端分頁在專案中

應用得非常的廣泛，但有時也需要使用客戶端分頁來加快分頁速度。本篇部落格就不介紹服務端分頁，只提供

easyui-table客戶端分頁的簡單例子（資料來源也從前端獲取），供初學者瞭解使用。

二、例項


<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>easyui-table表格客戶端分頁例項</title>
 <link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
 <script type="text/javascript" src="./easyui/jquery.min.js"></script>
 <script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
</head>
<body>
  <script type="text/javascript"> 
    //手動製造30條測試資料
    var data = []; 
    for (var i = 1; i < 31; ++i) { 
      data.push({ 
        "movie":"戰狼"+i, 
        "director":"吳京" + i +"號"
      }) 
    } 
    $(function () { 
      $("#easyuiTable").datagrid({ 
        title:"easyui測試客戶端分頁", 
        rownumbers:true, 
        fitColumns:true, 
        pagination:true, 
        data:data.slice(0,10), 
        columns:[ 
          [ 
            {field:`movie`, align:"center", title:"電影",width:100},
            {field:`director`, align:"center", title:"導演",width:100}
          ] 
        ] //easyui需要兩個破折號
      }); 
   //以下程式碼處理分頁功能，可直接使用
      var pager = $("#easyuiTable").datagrid("getPager"); 
      pager.pagination({ 
        total:data.length, 
  displayMsg:`當前顯示從第{from}條到{to}條 共{total}條記錄`,
        onSelectPage:function (pageNo, pageSize) { 
          var start = (pageNo - 1) * pageSize; 
          var end = start + pageSize; 
          $("#easyuiTable").datagrid("loadData", data.slice(start, end)); 
          pager.pagination(`refresh`, { 
            total:data.length, 
            pageNumber:pageNo 
          }); 
        } 
      }); 
    }); 
  </script> 
</head> 
<body> 
<div id="easyuiTable"></div> 
</body> 
</html>

三、總結

    1. easyui-table客戶端分頁只需要幾個步驟即可實現：引入easyui的js、css；html頁面新增一個table
標籤同時給id賦值；js新增初始化程式碼；
    2.easyui-table客戶端分頁的資料來源可以是伺服器端傳遞過來，也可以是前端js獲取，該例項使用的是前端
js的資料來源，初始化引數需要新增data，同時去掉url；
    3.easyui-table客戶端分頁和bootstrap-table的使用方法有點不同，bootstrap相對來說會比較簡單使用，而easyui需要自行設定分頁方式，需要新增額外的js程式碼進行分頁；
    3.本部落格的例項下載路徑：http://download.csdn.net/detail/alan_liuyue/9922822





相關文章