欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小白模仿bootstrap-table写的分页插件

程序员文章站 2022-04-29 17:46:26
...

好久不写前端了,作为一个前端的菜鸟,还是要多加练习才行。这个分页插件用的是jquery,同时借鉴了bootstrap的表格和分页样式。下面先上效果图

小白模仿bootstrap-table写的分页插件

使用方法也比较简单。

首先引入依赖

 <link rel="stylesheet" href="/css/XLtable.css">
 <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="/js/XLPage.js"></script>

然后在html中如下所示,其中样式是我在XLtable.css中定义好的。若是想改变请自行修改源码。

  <table class="mytable mytable-bordered mytable-condensed">
        <thead>
        <tr>
            <th>订单id</th>
            <th>姓名</th>
            <th>手机号</th>
            <th>地址</th>
            <th>金额</th>
            <th>订单状态</th>
            <th>支付状态</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody id="dataBody">
        </tbody>
    </table>
    <div id="XLPageDiv"  style="width: 100%;height: 35px;line-height: 35px;  float: left" >

    </div>

注意标红的地方不能改变。js根据id进行指定位置渲染。

最后一步是在js中调用,注释写的比较清晰了,我就不过多啰嗦了。

<script type="text/javascript">

$(function () {
    //返回到前端的实体属性,用数组表示,下面是我的例子。请自行根据实际情况修改。
    fields = ["orderId", "buyerName", "buyerPhone", "buyerAddress", "orderAmount", "orderStatus", "payStatus", "createTime"];
    mytype = "GET";//GET 或者POST
    //请求路径
    myurl = "${PATH}/page/list";
    //这两个变量必须有
    var defaultPage = 1 ;
    var defaultSize = 5;
   /* 渲染 必须进行*/
    XLrender();
    getTable(defaultPage, defaultSize, fields, mytype, myurl);
    /* 显示选择条数 true 显示  false 不显示*/
    getSelect(true);
    /*显示跳转指定页面  true 显示  false 不显示*/
    getJumpPageContent(true);
});
</script>

源码我放在github上,想了解的请自行下载。

(若是下载下来不进行修改是不能使用的,因为请求数据路径和引用文件路径不对,请自行修改)

https://github.com/836219171/XLpageUtils