汽车售票系统——分页查看所有车次

我们要实现对车次信息的查询，主要用到的是mybatis的分页插件pagehelper，ajax。
下面是我们分页查询的最终页面：

其中有三个分页的功能：

• 对车次的详细信息进行分页，显示查询结果。
• 左下角，显示当前第几页，总共第几页，总共多少个车次。
• 底部中央，首页、1、2、n、末页的实现。

先看一下html，我这里是用的ajax传值，所以这里的车次等数据都在js文件的函数里面。

<!--显示表格数据 -->
                        <div class="row">
                            <div class="table-responsive col-md-12">
                                <table class="table table-hover" id="trips_table">
                                    <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" id="check_all"/>
                                        </th>
                                        <th>ID</th>
                                        <th>起始站</th>
                                        <th>目的站</th>
                                        <th>出发时间</th>
                                        <th>到达时间</th>
                                        <th>跨越天数</th>
                                        <th>车次号</th>
                                        <th>价格</th>
                                        <th>剩余票数</th>
                                        <th>途径站</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>

然后我们再看html中调用的js文件，其中的三种函数。

1、build_trips_table函数：
先将id为trips_table的table标签中的tbody标签清空，然后通过后端传过来的result中数据添加到前端。添加的方式 类似：$(“”).append(checkBox).appendTo(“#trips_table tbody”)。
这样我们就可以把后端得到的list列表数据，以html的方式展示出来，但是目前还没有分页。

function build_trips_table(result) {
        //清空table表格
        $("#trips_table tbody").empty();
        var trips = result.data.list;

        //遍历元素
        $.each(trips, function (index, item) {
            var checkBox=$("<td><input type='checkbox' class='check_item'/></td>");
            var id = $("<td></td>").append(item.id);
            var orginLocation = $("<td></td>").append(item.orginLocation);
            var destinationLocation = $("<td></td>").append(item.destinationLocation);
            var startTimeText = item.startTime;
            //去除时间后面的.0
            startTimeText = startTimeText.substring(0, startTimeText.lastIndexOf(':'));
            var startTime = $("<td></td>").append(startTimeText);
            var reachTimeText = item.reachTime;
            //去除时间后面的.0
            reachTimeText = reachTimeText.substring(0, reachTimeText.lastIndexOf(':'));
            var reachTime = $("<td></td>").append(reachTimeText);
            var spanDays = $("<td></td>").append(item.spanDays);
            var carNum = $("<td></td>").append(item.carNum);
            var ticketPrice = $("<td></td>").append(item.ticketPrice);
            var ticketNum = $("<td></td>").append(item.ticketNum);

            //查看途经站信息
            var button0 = $("<td></td>").append($("<button></button>").addClass("btn btn-default btn-sm look_btn").append($("<span></span>").attr("aria-hidden", true)).append("查看"));
            var button1 = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil").attr("aria-hidden", true)).append("编辑");
            var button2 = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash").attr("aria-hidden", true)).append("删除");
            var td_btn = $("<td></td>").append(button1).append(" ").append(button2);
            $("<tr></tr>").append(checkBox).append(id).append(orginLocation).append(destinationLocation).append(startTime).append(reachTime).append(spanDays).append(carNum).append(ticketPrice).append(ticketNum)
                .append(button0).append(td_btn ).appendTo("#trips_table tbody");

        })
    }

2、build_page_info函数：
后端传过来的result中，通过result.data.pageNum等获取到想过数值，最后实现“当前1页,总共2页，总共7条记录”。

function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前" + result.data.pageNum + "页,总共" + result.data.pages +
            "页，总共" + result.data.total + "条记录");
        totalRecord = result.data.total;
        currentPage=result.data.pageNum;
        totalPage = result.data.pages;
    }

3、build_page_nav函数：
首页、前一页、1、2、3、下一页、尾页。先从使用角度考虑逻辑问题，如果是第一页，前一页就不能点击等类似问题。
然后通过js先添加首页和第一页：ul.append(firstPageLi).append(prePageLi);
然后再遍历添加页码；
最后添加下一页和尾页；

function build_page_nav(result) {
        //console.log(result);
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        //如果没有前一页，前一页和首页就不能点
        if (result.data.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //首页
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.data.pageNum - 1);
            });
        }
        if (result.data.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //构建点击事件
            nextPageLi.click(function () {
                to_page(result.data.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.data.lastPage);
            })
        }
        //添加首页和前一页
        ul.append(firstPageLi).append(prePageLi);
        //遍历添加页码
        $.each(result.data.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
            //如果是当前选中页面，添加active标识
            if (result.data.pageNum == item) {
                numLi.addClass("active");
            }
            //给每个页码添加点击就跳转
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页
        ul.append(nextPageLi).append(lastPageLi);
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

4、而这些都是由to_page()函数调用
比如点击了第3页，就to_page(3)，然后携带数据“pn=3”，请求后端的"…/getalltripsforadmin"，得到result，再分别处理上面三个函数。

function to_page(pn) {
        $.ajax({
            url: "../getalltripsforadmin",
            data:"pn="+pn,
            type: "GET",
            dataType: "json",
            contentType:"application/json;charset=UTF-8",
            success: function (result) {
                //alert(result.msg);
                //解析并显示车次数据表
                build_trips_table(result)
                //2.解析并显示分页信息
                build_page_info(result);
                //3.解析并显示分页条数据
                build_page_nav(result);
            }
        })
    }

我们再看后端对“pn=n”的处理，首先是要引入pagehelper的依赖
然后通过控制器先完成第一步的处理，这里定义了pageSize的大小为5，
然后通过PageHelper.startPage(pn,pageSize)做分页，
然后用pageInfo类来处理查询到的数据，
在new一个modelMap对象，用来传递发送给前端的result。

@GetMapping("/getalltripsforadmin")
    public Map<String,Object> getAllTripsForAdmin(@RequestParam(defaultValue="1",required=true,value="pn") Integer pn){

        Integer pageSize=5;
        PageHelper.startPage(pn,pageSize);
        List<Trips> allTrip = tripsService.getAllTripsForAdmin();
        PageInfo<Trips> pageInfo = new PageInfo(allTrip);
        Map<String, Object> modelMap = new HashMap<>();
        if (pageInfo != null){
            modelMap.put("code", 200);
            modelMap.put("data", pageInfo);
        }else {
            modelMap.put("code", 200);
            Map<String, Object> dataMap = new HashMap<>();
            dataMap.put("message", "获取model列表失败");
            dataMap.put("entity", null);
            modelMap.put("data", dataMap);
        }
        return modelMap;
    }

controller之后的service层和dao层就是对车次数据的查询，用Page类来存放，不作说明。

以上就是ajax处理分页查询的具体流程。打开车次统计页面后，js默认先请求处理第一页的数据，后端的返回result值，作为js中三个函数的参数，函数调用后，显示具体数据和格式到html页面上。