JQuery实现分页程序代码，源码下载

Web开发，分页在所难免的，微软GridView、AspPager等设置分页数据可以自动分页，但是这里浏览器会闪动，用户体验不是很友好，在此我整理了JQuery实现分页，并且使用

JQuery模板显示数据,用户体验很友好

项目结构：

jquery.tools.pack.js是Jquery数据显示模板

Default.aspx显示分页数据，Member_Ajax.aspx是将数据已JSON格式输出到页面，PageBar.cs分页工具条，Student.cs实体类

首先Default.aspx页面需要引用的JS文件

JQuery采用 1.4.1.1 下载地址：http://pan.baidu.com/share/link?shareid=3024434948&uk=2920032010

JQuery数据显示模板JS 下载地址：http://pan.baidu.com/share/link?shareid=3030793948&uk=2920032010

分页按钮样式 下载地址：http://pan.baidu.com/share/link?shareid=3146737028&uk=2920032010

Default.aspx页面js代码，如下,每页条数可以自定义，也可以放置配置文件中，queryString函数是根据URL参数名称，获取参数的值

<script type="text/javascript">
        var pagesize = 10;
        var page = thispage();
        $(document).ready(function () {
            ajaxList(page);
        });

        function queryString(pname) {
            var query = location.search.substring(1);
            var str = "";
            params = query.split("&");
            if (params.length > 0) {
                for (var n in params) {
                    var pairs = params[n].split("=");
                    if (pairs[0] == pname) {
                        str = pairs[1];
                        break;
                    }
                }
            }
            return str;
        }

        function thispage() {
            var r = /^[1-9][0-9]*$/;
            if (queryString('page') == '') return 1;
            if (r.test(queryString('page')))
                return parseInt(queryString('page'));
            else
                return 1;
        }

        function ajaxList(currentpage) {
            if (currentpage != null) page = currentpage;
            $.ajax({
                type: "get",//get类型，获取用QueryString方法，post类型，用Form获取传值
                dataType: "json",
                data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(),
                url: "Member_Ajax.aspx",
                error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },
                success: function (d) {
                    switch (d.result) {
                        case '-1':
                            Alert(d.returnval);
                            break;
                        case '0':
                            Alert(d.returnval);
                            break;
                        case '1':
                            $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true });
                            $("#ajaxList").processTemplate(d);
                            $("#ajaxPageBar").html(d.pagebar);
                            break;
                    }
                }
            });
        }

 </script>

 
Default.aspx页面Form代码如下，页面数据使用JQuery jTemplates绑定数据，非常方便，只需设置JSON格式数据，引用JS文件即可

<textarea >
            <table class="cooltable" width="300px">
            <thead>
                <tr>
                    <th align="center" scope="col" style="width:30px;"><input onclick="checkAllLine()"  /></th>
                    <th scope="col" style="width:60px;">ID</th>
                    <th width="120px">姓名</th>
                    <th scope="col" width="60px">年龄</th>
                    
               </tr>
            </thead>
            <tbody>
    {#foreach $T.table as record}
    <tr>
        <td align="center">
            <input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' />
        </td>
        <td align="center">{$T.record.Id}</td>
        <td align="left">
            {$T.record.Name}
        </td>
        <td align="left">
            {$T.record.Age}
        </td>
    </tr>
    {#/for}
</tbody>
            </table>
     </textarea>
    <div >
    </div><br />
    <div >
    </div>

View Code