cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery EasyUI kaedah datagrid untuk melaksanakan paging_jquery tempatan

jQuery EasyUI kaedah datagrid untuk melaksanakan paging_jquery tempatan

WBOY
WBOYasal
2016-05-16 16:14:21988semak imbas

Contoh dalam artikel ini menerangkan cara jQuery EasyUI datagrid melaksanakan paging setempat. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Secara amnya, paging dilakukan di latar belakang, dan tidak sesuai untuk melakukannya di bahagian hadapan tidak kira apa aspek yang anda pertimbangkan. Tetapi kadang-kadang masih ada keperluan sedemikian.

Kunci di sini ialah menggunakan pemantauan penomboran dan kaedah hirisan tatasusunan JS untuk diselesaikan. Kodnya adalah seperti berikut: 

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

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk mendapatkan nod zTree yang dipilih pada kemahiran page_javascript indukArtikel seterusnya：Bagaimana untuk mendapatkan nod zTree yang dipilih pada kemahiran page_javascript induk

Artikel berkaitan

Lihat lagi