recherche

Maison >interface Web >js tutoriel >Méthode de grille de données jQuery EasyUI pour implémenter la pagination_jquery locale

Méthode de grille de données jQuery EasyUI pour implémenter la pagination_jquery locale

WBOY
WBOYoriginal
2016-05-16 16:14:211007parcourir

L'exemple de cet article décrit comment la grille de données jQuery EasyUI implémente la pagination locale. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Généralement, la pagination est effectuée en arrière-plan, et il est inapproprié de la faire en front-end, quel que soit l'aspect que vous considérez. Mais parfois, un tel besoin existe encore.

La clé ici est d'utiliser la surveillance de la pagination et la méthode slice du tableau JS pour terminer. Le code est le suivant : 

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

L'effet de l'opération est comme indiqué ci-dessous :

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir le nœud sélectionné de zTree sur les compétences page_javascript parentArticle suivant：Comment obtenir le nœud sélectionné de zTree sur les compétences page_javascript parent

Articles Liés

Voir plus