jq分页插件

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>