zoukankan      html  css  js  c++  java
  • 分享一个jQuery 客户端分页插件

    1.引用样式文件:

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

    2.引用JS文件:

    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

    <script type="text/javascript" src="js/jquery.pagination.js"></script>

    3. html 代码

    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table" id="tblList">
    <tr>
    <th width="50">
    序号
    </th>
    <th width="140">
    申请日期
    </th>
    <th width="140">
    申请项目
    </th>
    <th width="100">
    是否成功
    </th>
    <th>
    批单号或收据号
    </th>
    <th width="120">
    申请途径
    </th>
    </tr>
    </table>

    <div id="pager"></div>

    4.初始化

    var dataList = null; //数据源
    var $tblList = $('#tblList');
    var pageSize = 10; //每页10条
    //
    查询记录列表
    function recordListQuery() {
    $.ajax({
    url: __request__.policyQuery.getOperationTransactRecord,
    data: {
    refreshFlag:
    true,
    polNo: $(
    "#polNo").val(),
    regionCode: $(
    "#regionCode").val()
    },
    type:
    'GET',
    dataType:
    'xml',
    success:
    function (xml) {
    //设置数据源
    dataList = $(xml).find('session > AcceptInformationDTO');
    //初始化分页控件
    $("#pager").pagination(dataList.length, {
    callback: pageselectCallback,
    items_per_page: pageSize
    //每页10条
    });
    }
    });
    //end ajax
    };
    //分页回调函数
    function pageselectCallback(pageIndex, jq) {
    // 移除之前的数据
    $tblList.find('tr:not(:first)').remove();
    var len = dataList.length; //总记录条数
    var max_elem = Math.min((pageIndex + 1) * pageSize, len);
    var arr = [];
    //分页输出数据
    for (var i = pageIndex * pageSize; i < max_elem; i++) {
    var o = $(dataList[i]);
    arr.push(i
    % 2 == 0 ? "<tr>" : "<tr class='gh'>");
    arr.push(
    '<td align="center">' + (i + 1) + '</td>');
    arr.push(
    '<td align="center">' + formatDate(o.find('acceptDate').text()) + '</td>');
    //...
    arr.push("</tr>");
    }
    $tblList.append(arr.join(
    ''));
    return false;
    }

    5.下载

    http://github.com/gbirke/jquery_pagination

    6.结果

  • 相关阅读:
    SpringBoot 项目 打包为 Docker镜像
    0/1 nodes are available: 1 node(s) had taints that the pod didn't tolerate.
    注册k8s到rancher时 agent pods一直处于containercreating状态
    linux查看磁盘使用情况
    linux修改系统时间、时区
    windows 添加路由
    Notebook Docker 安装spark环境
    openlayers6加载天地图混乱问题
    Oracle 高效分页
    VSCode 终端无法打开
  • 原文地址:https://www.cnblogs.com/weekend001/p/2022233.html
Copyright © 2011-2022 走看看