로컬 paging_jquery를 구현하는 jQuery EasyUI DataGrid 메서드-JS 튜토리얼-php.cn

로컬 paging_jquery를 구현하는 jQuery EasyUI DataGrid 메서드

WBOY

풀어 주다： 2016-05-16 16:14:21

원래의

1013명이 탐색했습니다.

이 기사의 예에서는 jQuery EasyUI DataGrid가 로컬 페이징을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

일반적으로 페이징은 백그라운드에서 이루어지는데, 어떤 측면을 고려하더라도 프런트엔드에서 하는 것은 부적절합니다. 그러나 때로는 여전히 그러한 필요성이 있습니다.

여기서 핵심은 페이지 매김 모니터링과 JS 배열의 슬라이스 방법을 사용하여 완료하는 것입니다. 코드는 다음과 같습니다.

<!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>

로그인 후 복사

작동 효과는 아래와 같습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.