datagrid分页工具栏的实现

在给datagrid绑定数据时，你会发现，此时相对应的工具栏上的分页是没有起作用的，如何解决这个问题，其实就是在绑定数据库的基础上再添加一个函数（pagerFilter(data)），其他的地方都没有改动，包括一般应用程序也没有改变，具体代码如下：

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <link href="easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/themes/icon.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/shine.js"></script>
    <script type="text/javascript">  
        $(function () {  
            $('#dg').datagrid({
                url:'ashx/GetDataFormSql.ashx',  
                width: 800,  
                title: '设备管理',  
                method:'get',  
                columns: [[  
                    { field: 'adminName', title: '登录名', width: 300 },
                    { field: 'trueName', title: '用户名', width: 300 },
                    { field: 'mobilePhone', title: '联系电话', width: 200 }
                ]],  
                pagination: true,  
                pageSize:1,  
                pageList:[1,2,3]  
            })  
        })
        function pagerFilter(data) {
            if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array  
                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> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table id="dg"></table>  
    </div>
    </form>
</body>
</html>

 

posted @ 2017-06-09 16:07  chu_叶子  阅读(1080)  评论(0)    收藏  举报