easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析

更新時間：2020年06月01日 11:02:48 作者：二萌偏

這篇文章主要介紹了easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作,結(jié)合實例形式詳細分析了easyUI分頁過濾器對數(shù)據(jù)進行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作。分享給大家供大家參考，具體如下：

在后臺管理系統(tǒng)中，由于數(shù)據(jù)量的龐大，我們經(jīng)常需要用到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);//加載數(shù)據(jù)表格
    }
  });
}

/**
 * 前臺鋪值
 */
function getData() {
  $("#wu-datagrid-stuInfo").datagrid({
    loadFilter: pagerFilter,//調(diào)用分頁過濾器方法
    checkOnSelect: true,//當用戶點擊行的時候該復選框就會被選中或取消選中
    autoRowHeight: false,//自定義設置行的高度，根據(jù)該行的內(nèi)容
    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: '性別',
      width: '100',
      align: 'center'
    }, {
      field: 'stuAge',
      title: '年齡',
      width: '100',
      align: 'center'
    }, {
      field: 'stuIntroduce',
      title: '介紹',
      width: '700',
      align: 'center'
    }, {
      field: 'createTime',
      title: '創(chuàng)建時間',
      width: '130',
      align: 'center'
    }
    ]],
    idField: 'id',
    loadMsg: 'Processing, please wait …',
    pagination: true//將分頁設置為true
  });
}

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

注意：從后臺取到的數(shù)據(jù)是全部的學生信息，這段代碼，復制到JS代碼里面就可以實現(xiàn)。

/**
 * 分頁過濾器
 * @param data 全部數(shù)據(jù)
 * @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使用分頁過濾器實現(xiàn)前臺數(shù)據(jù)分頁的方法。如有錯誤，還望指正，謝謝。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章: