`

easyUI分页1

阅读更多 
<%@ 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>

 

分享到：
| jquery表单验证
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics