您的位置：首页 > Web前端 > JQuery

jQuery MiniUI 前台分页

2016-07-07 15:53 323 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>DataGrid 数据表格</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/boot.js" type="text/javascript"></script>

</head>

<body>

     <h1>Client Pagination 客户端分页</h1>

    <div id="datagrid1" class="mini-datagrid" style="width:600px;height:280px;" idField="id" pageSize="10" multiSelect="true"

    >

        <div property="columns">

            <div type="indexcolumn"></div>

            <div type="checkcolumn"></div>

            <div field="loginname" width="120" headerAlign="center" vtype="required;email" autoEscape="true" allowSort="true">员工帐号</div>

            <div field="age" width="100" allowSort="true" >年龄</div>

            <div field="gender" width="100" allowSort="true" align="center" headerAlign="center">性别</div>

            <div field="country" width="100" headerAlign="center" >国家</div>

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    mini.parse();

    var grid = mini.get("datagrid1");

    // 分页填充细节处理

    function fillData(pageIndex, pageSize, dataResult, grid) {



        var data = dataResult.data, totalCount = dataResult.total;

        var arr = [];

        var start = pageIndex * pageSize, end = start + pageSize;

        for (var i = start, l = end; i < l; i++) {

            var record = data[i];

            if (!record) continue;

            arr.push(record);

        }



        grid.setTotalCount(totalCount);

        grid.setPageIndex(pageIndex);

        grid.setPageSize(pageSize);

        grid.setData(arr);

    }

    // 监听分页前事件，阻止后自行设置当前数据和分页信息

    grid.on("beforeload", function (e) {

        e.cancel = true;

        var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;

        fillData(pageIndex, pageSize, dataResult, grid);

    });

    ////////////////////////////////////////////////////////////////////////

    // 获取所有数据和总记录数 { total: 100, data: [...] }

    var dataResult = null;

    $.ajax({

        url: 'data.txt',

        dataType: 'text',

        async: false,

        success: function (text) {

            dataResult = mini.decode(text);

        }

    });

    // 第一次设置

    fillData(0, grid.getPageSize(), dataResult, grid);

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery MiniUI

相关文章推荐

新的分享

章节导航