小白模仿bootstrap-table寫的分頁插件

好久不寫前端了，作為一個前端的菜鳥，還是要多加練習才行。這個分頁插件用的是jquery，同時借鑒了bootstrap的表格和分頁樣式。下面先上效果圖

使用方法也比較簡單。

首先引入依賴

<link rel="stylesheet" href="/css/XLtable.css" target="_blank" rel="external nofollow" >
 <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