欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery EasyUI datagrid實現(xiàn)本地分頁的方法

 更新時間:2015年02月13日 09:21:30   作者:筆心  
這篇文章主要介紹了jQuery EasyUI datagrid實現(xiàn)本地分頁的方法,以實例形式較為詳細(xì)的分析了本地分頁的原理與相關(guān)的實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery EasyUI datagrid實現(xiàn)本地分頁的方法。分享給大家供大家參考。具體如下:

一般分頁都是后臺做,前端做無論從哪方面考慮都不合適。但是有的時候還是有這種需求。

這里重點用到了pagination的監(jiān)聽,以及JS數(shù)組的slice方法來完成。代碼如下:

<!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"> 
    // 表格數(shù)據(jù)源 
    var data = []; 
    // 用代碼造30條數(shù)據(jù) 
    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程序設(shè)計有所幫助。

相關(guān)文章

最新評論