分页处理 jquery ajax

来源：互联网发布：淘宝上的原厂汽车配件编辑：程序博客网时间：2024/05/22 11:37
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>分页处理 jquery</title>    <script src="common/jquery.js" type="text/javascript"></script>    <script src="common/jquery.pagination.js" type="text/javascript"></script>    <link href="common/pagination.css" rel="stylesheet" type="text/css" /></head><body><script type="text/javascript">    var pageIndex = 0;     //页面索引初始值    var pageSize = 15;     //每页显示条数初始化，修改显示条数，修改这里即可    $(function () {        InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）        //分页，PageCount是总条目数，这是必选参数，其它参数都是可选        $("#Pagination").pagination(100, {            callback: PageCallback,  //PageCallback() 为翻页调用次函数。            prev_text: "« 上一页",            next_text: "下一页 »",            items_per_page:pageSize,            num_edge_entries: 2,       //两侧首尾分页条目数            num_display_entries: 6,    //连续分页主体部分分页条目数            current_page: pageIndex   //当前页索引        });        //翻页调用        function PageCallback(index, jq) {            InitTable(index);        }        //请求数据        function InitTable(pageIndex) {            var tbody = "";            $.ajax({                type: "POST",                dataType: "text",                url: 'http://www.zuihuibao.com/index.php',      //提交到一般处理程序请求数据                data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                success: function(data) {                    $("#linkTable tr:gt(0)").remove();                    for(var k in data){                        var trs = "";                        trs += "<tr><td align='center'>" + data[k]['ProductName'] + "</td><td>" +                                data[k]['QuantityPerUnit'] + "</td></tr>";                        tbody += trs;                        $("#linkTable").append(tbody);                    }                }            });        }    });</script><div>    <table id="linkTable" cellpadding="6" cellspacing="1" align="left" class="tablesorter" style="width:400px;margin:0 0 20px 5px;">        <thead>        <tr class="tableHeader" align="center">            <th style="width:200px; text-align:center;" >                产品名称            </th>            <th style="width:200px; text-align:center">                产品单价            </th>        </tr>        </thead>    </table></div><div id="Pagination" class="digg"></div></body></html>
0 0