欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

easyUI分页1

程序员文章站 2024-03-21 12:44:52
...
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>客户端分页demo</title>

   <%@include file="base.jsp"%>

</head>

<body>

    <h2>客户端分页Demo</h2>



 

    <table id="dg" title="Client Side Pagination" style="width:100%" data-options="

                rownumbers:true,

                singleSelect:true,

                autoRowHeight:false,

                pagination:true,

                pageSize:10">

        <thead>

            <tr>

                <th field="inv" width="20%">姓名</th>

                <th field="date" width="20%">年龄</th>

                <th field="name" width="20%">性别</th>

                <th field="amount" width="10%" align="right">班级</th>

                <th field="price" width="10%" align="right">学号</th>

                <th field="cost" width="10%" align="right">其他</th>

                <th field="note" width="10%">备注</th>

            </tr>

        </thead>

    </table>

    <script>

 

        function getData(){//模拟数据

            var rows = [];

            for(var i=1; i<=80000; i++){

                var amount = Math.floor(Math.random()*1000);

                var price = Math.floor(Math.random()*1000);

                rows.push({

                    inv: 'Inv No '+i,

                    date: $.fn.datebox.defaults.formatter(new Date()),

                    name: 'Name '+i,

                    amount: amount,

                    price: price,

                    cost: amount*price,

                    note: 'Note '+i

                });

            }

            //console.log(JSON.stringify(rows));

            return rows;

 

        }

 

        function pagerFilter(data){

            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组

                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;

        }

 

        $(function(){//加载数据

            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());

        });

    </script>

</body>

</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	
	<title>Basic Dialog - jQuery EasyUI Demo</title>
	<%@include file="base.jsp"%>
  <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>