easyUI 는 페이지 필 터 를 사용 하여 데이터 에 대해 페이지 조작 실례 분석 을 한다

이 글 의 인 스 턴 스 는 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: '  ',
      width: '100',
      align: 'center'
    }, {
      field: 'stuAge',
      title: '  ',
      width: '100',
      align: 'center'
    }, {
      field: 'stuIntroduce',
      title: '  ',
      width: '700',
      align: 'center'
    }, {
      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 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.