jq分页插件

http://www.zhangxinxu.com/jq/pagination_zh/

html

---------------

<tbody id="hiddenresult" style="display:none;">

                    <tr>

                	    <td>5</td><td>333</td>

                        <td >

                           <span style="color:#e5b612">送审</span>

                            <span> 工作人员1</span>

                        </td>

                        <td><span  class="redtag">5王某某　　送审　　工作人员1</span></td>

                        <td>2014-06-26 09:26</td>

                    </tr>

</tbody>

 <tbody id="Searchresult"></tbody>

<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>

js
----------------------------------------------

<script type="text/javascript">

                $(function () {

                    //这是一个非常简单的demo实例，让列表元素分页显示

                    //回调函数的作用是显示对应分页的列表项内容

                    //回调函数在用户每次点击分页链接的时候执行

                    //参数page_index{int整型}表示当前的索引页

                    var iPageSize = 5;

                    var rowsLength = $("#hiddenresult tr").length;

                    var initPagination = function () {

                        var num_entries = rowsLength;

                        // 创建分页

                        $("#Pagination").pagination(num_entries, {

                            num_edge_entries: 1, //边缘页数

                            num_display_entries: parseInt(num_entries / iPageSize), //主体页数

                            callback: pageselectCallback,

                            items_per_page: iPageSize //每页显示几项

                        });

                    } ();

                    function pageselectCallback(page_index, jq) {

                        // 从表单获取每页的显示的列表项数目

                        var max_elem = Math.min((page_index + 1) * iPageSize, rowsLength);

                        $("#Searchresult").html("");

                        // 获取加载元素

                        for (var i = page_index * iPageSize; i < max_elem; i++) {

                            var new_content = $("#hiddenresult tr:eq(" + i + ")").clone();

                            $("#Searchresult").append(new_content); //装载对应分页的内容

                        }

                        //阻止单击事件

                        return false;

                    }

                });

</script>

巴特西

jq分页插件

最新文章

热门文章