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

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

使用方法也比较简单。

首先引入依赖

 <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

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

猜你喜欢