Web开发：分页技术的实现（上）——jBootstrapPage.js+ajax

程序员文章站 2022-06-13 21:50:22

...

在Web开发过程中常常需要查看数据列表，为了能够有效的展示数据列表，需要使用到分页技术，该技术可以分为前端和后端两个部分，前端实现显示当前页的数据以及上下翻页功能，后端实现查询数据记录总数查询和查询出当前页需要显示的数据并传回前端。

前端实现：jBootstrapPage.js+ajax

（1）jBootstrapPage.js的使用，需要三个参数，一页显示的数据行数，翻页功能按钮最多出现的个数以及总数据量。在function中实现我们需要的功能。

function createPage(pageSize, buttons, total) {
                $(".pagination").jBootstrapPage({
                    pageSize : pageSize,
                    total : total,
                    maxPageButton:buttons,
                    onPageClicked: function(obj, pageIndex) {
                           //实现功能
                    }
                });
        }

在页面加载前我们首先查询数据库得到我们的数据总量，然后调用以上函数便能在页面上添加翻页功能按钮

其中，页面内容：

<form>
                    <table class="table table-bordered">
                           <thead>
                              <tr>
                                 <th></th>
                                 <th></th>
                              </tr>
                           </thead>
                           <tbody>
                           </tbody>
                    </table>
                </form>
                </div>
                <div>
                    <ul class="pagination"></ul>              //翻页功能按钮模块
                </div>

html依赖的脚本：

<script language="javascript" type="text/javascript" src="../resource/js/jquery-1.7.1.min.js"></script>
 <script language="javascript" type="text/javascript" src="../resource/js/jBootstrapPage.js"></script>

（2）ajax异步获取后台数据的页面脚本：首先向countContractsAjaxAction.action请求获取记录总数，创建按钮模块，并且绑定按钮点击时需要访问的action，刚加载页面时需要显示第一页数据，所以向contracts_url（一个action）获取首页数据并显示使用jquery添加表元素，

$(document).ready(function(){
            count_contracts_ajax("countContractsAjaxAction.action");      //后台使用struts2
 })

function count_contracts_ajax(urlparam){
            $.ajax({
                type: "post",
                url: urlparam,
                data: null,
                success: function (result) {      //result为json格式数据，count是总记录数
                    createPage(10, 10, result.count，contracts_url);//创建翻页功能按钮，翻
                    if(result.count == 0){                          //页向后台请求连接
                        alert("no records exist!");
                    }else{                              //如果总数不为空查询列出当前页数据
                        $("tbody").empty();                       //首先清空表中内容
                        list_contracts_ajax(contracts_url);
                    }
                }
            })
        }

为了能够在创建翻页模块的同时能够加载页面数据，在函数参数中增加了请求加载数据的action，点击的时候请求特定的页的数据，这些参数异步传到后台

function createPage(pageSize, buttons, total, contracts_url) {        //contracts_url为点击
                $(".pagination").jBootstrapPage({      //功能按钮后需要访问action路径
                    pageSize : pageSize,
                    total : total,
                    maxPageButton:buttons,
                    onPageClicked: function(obj, pageIndex) {
                        $("tbody").empty();                                  //清空
                        contracts_url = contracts_url.replace("pageIndex=1", "pageIndex="+    (pageIndex+1));                                         //显示当前页，向action传递参数
                        list_contracts_ajax(contracts_url);
                    }
                });
        }

点击翻页按钮触发的函数如下，它通过异步的方式查寻后台数据库获取当前页的数据并插入表中

function list_contracts_ajax(urlparam){
                $.ajax({
                    type: "post",
                    url: urlparam,
                    data: null,
                    success: function (result) {
                        //alert(result.length);
                        for(var i = 0;i < result.length; i++){   //json格式，多行数据的数组
                            var tr = $("<tr></tr>");                      //一行记录
                            tr.appendTo($("tbody"));
                            var td = $("<td>"+result[i].contract_id+"</td>");    //第一列
                            td.appendTo(tr);
                            td = $("<td></td>"); //第二列，加入button以便对当前行进行操作
                            var detailbt = $("<button type='button' class='btn btn-default btn-sm' onclick='complete_contract(this)'>详情</button>");
                            detailbt.appendTo(td);
                            td.appendTo(tr);
                        }

                    }
                })
        }

总结：

在页面加载时，调用函数生成翻页按钮模块（一次请求），并在表中插入第一页的数据（两次请求），当点击翻页的时候请求当页的数据（一次翻页一次请求）

Web开发：分页技术的实现（上）——jBootstrapPage.js+ajax

Web开发：分页技术的实现（中）——Struts2+json