本文例項講述了easyUI使用分頁過濾器對資料進行分頁操作。分享給大家供大家參考，具體如下：

在後臺管理系統中，由於資料量的龐大，我們經常需要用到easyui框架的分頁工具。在本文章中，使用了分頁過濾器進行分頁的方法，示例如下：

程式碼如下：

HTML

<table id="wu-datagrid-stuInfo" class="easyui-datagrid" toolbar="#wu-toolbar-stuInfo">
</table>

JS程式碼

/**
 * 獲取所有學員資訊
 */
function show() {
  $.ajax({
    url: httpurl + '/jsrAdminWeb/selectAll',//連線後臺介面
    type: 'post',dataType: 'json',contentType: "application/json",async: false,//false 同步

    success: function (result) {
      var stuData = result.data;
      getData();//鋪頁面（列）
      $("#wu-datagrid-stuInfo").datagrid("loadData",stuData);//載入資料表格
    }
  });
}

/**
 * 前臺鋪值
 */
function getData() {
  $("#wu-datagrid-stuInfo").datagrid({
    loadFilter: pagerFilter,//呼叫分頁過濾器方法
    checkOnSelect: true,//當用戶點選行的時候該複選框就會被選中或取消選中
    autoRowHeight: false,//自定義設定行的高度，根據該行的內容
    rownumbers: true,//顯示一個行號列
    singleSelect: false,//可以一次選擇多行
    // multiSort: true,//允許多列排序
    fit: true,columns: [[{
      field: 'id',//每一列的名字
      width: '50',title: 'ID',checkbox: true
    },{
      field: 'stuName',title: '姓名',width: '100',align: 'center'
    },{
      field: 'stuSex',title: '性別',{
      field: 'stuAge',title: '年齡',{
      field: 'stuIntroduce',title: '介紹',width: '700',{
      field: 'createTime',title: '建立時間',width: '130',align: 'center'
    }
    ]],idField: 'id',loadMsg: 'Processing,please wait …',pagination: true//將分頁設定為true
  });
}

分頁過濾器方法（寫在js程式碼中）：

注意：從後臺取到的資料是全部的學生資訊，這段程式碼，複製到JS程式碼裡面就可以實現。

/**
 * 分頁過濾器
 * @param data 全部資料
 * @returns {*}
 */
function pagerFilter(data) {
  if (typeof data.length == 'number' && typeof data.splice == 'function') {// is array
    data = {
      total: data.length,rows: data
    }
  }
  var dg = $(this);
  var opts = dg.datagrid('options');
  var pager = dg.datagrid('getPager');
  pager.pagination({
    onSelectPage: function (pageNum,pageSize) {
      opts.pageNumber = pageNum;
      opts.pageSize = pageSize;
      pager.pagination('refresh',{pageNumber: pageNum,pageSize: pageSize});
      dg.datagrid('loadData',data);
    }
  });
  if (!data.originalRows) {
    data.originalRows = (data.rows);
  }
  var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
  var end = start + parseInt(opts.pageSize);
  data.rows = (data.originalRows.slice(start,end));
  return data;
}

以上就是easyui使用分頁過濾器實現前臺資料分頁的方法。如有錯誤，還望指正，謝謝。

更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery擴充套件技巧總結》、《jQuery常用外掛及用法總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷演算法與技巧總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。