Bootstrap分頁表格插件如何使用？本篇文章介紹了Bootstrap分頁表格插件的使用方法，bootStrap table獲取數(shù)據(jù)有兩種方式，一是通過table 的data-url屬性指定數(shù)據(jù)源，二是通過JavaScript初始化表格時(shí)指定url來獲取數(shù)據(jù)。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的滄源網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

Bootstrap分頁表格插件使用教程

找了兩個(gè)table的插件，一個(gè)是bootstrap table ，另一個(gè)是bootstrap-paginator

這里只介紹 bootstrap table 插件 使用及簡(jiǎn)單案例

文檔介紹：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

1. 引入js、css文件

<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css">
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>

2.table數(shù)據(jù)填充

bootStrap table獲取數(shù)據(jù)有兩種方式，一是通過table 的data-url屬性指定數(shù)據(jù)源，二是通過JavaScript初始化表格時(shí)指定url來獲取數(shù)據(jù)*

注意：使用data-toggle="table"的話，js操作就會(huì)失效，反之生效

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
    
$('#table').bootstrapTable({
  url: 'data.json'
 });

3. js獲取數(shù)據(jù)的案例及釋義

<div class="panel panel-default">
            <div class="panel-body table-responsive">
　　　　　　　　　
    <div class="query-div" id="toolbar">
        <form class="form-inline" role="form" id="query_form">
            <div class="form-group query-form-group">
                <label for="status">狀態(tài)</label>
                <select class="form-control" id="with_appr_status"
                    <option value="">全部</option>
                    <option value="S1">待處理</option>
                    <option value="S2">已處理</option>
                </select>
            </div>
            <div class="form-group query-form-group">
                <button type="button" class="btn btn-default" id="with_query">查詢</button>
            </div>
        </form>
    </div>
                <table id="query_results" class="table table-hover">
                    <thead>
                    <tr>
                        <th data-field="code">編號(hào)</th>
                        <th data-field="time">申請(qǐng)時(shí)間</th>
                        <th data-field="status" data-formatter="formatStatus">提現(xiàn)狀態(tài)</th>
                        <th data-field="remark">備注</th>
                    </tr>
                    </thead>
                </table>
            </div>
</div>

//注意
//1. contentType: "application/x-www-form-urlencoded"  想要后臺(tái)使用struts來接受數(shù)據(jù)，或者使用對(duì)象.屬性的方法獲取，需要配置這個(gè)form，默認(rèn)是“json”
//2. pageNo 第幾頁，需要使用“Math.ceil(params.offset/params.limit) + 1”來計(jì)算，params.pageNumber一直獲取的是第一頁
loadData();//默認(rèn)查詢
function loadData(){
//表格id
$('#query_results').bootstrapTable({
        url: '/test',  //請(qǐng)求后臺(tái)的URL（*）
        method: 'post',   //請(qǐng)求方式（*）
        contentType: "application/x-www-form-urlencoded",//需要設(shè)置為這個(gè)參數(shù)，后臺(tái)才能通過對(duì)象獲取值,這里要注意
        dataType: "json",//期待返回?cái)?shù)據(jù)類型
        toolbar: '#toolbar',  //工具按鈕用哪個(gè)容器
        toolbarAlign: "left",//工具欄對(duì)齊方式
        striped: true,   //是否顯示行間隔色
        cache: false,   //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
        pagination: true,   //是否顯示分頁（*）
        //sortable: false,   //是否啟用排序
        sidePagination: "server",  //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
        pageNumber: 1,   //初始化加載第一頁，默認(rèn)第一頁
        pageSize: 5,   //每頁的記錄行數(shù)（*）
        pageList: [5, 10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
        sortOrder: "asc",   //排序方式
        search: false,//搜索功能
        buttonsAlign: "left",//按鈕對(duì)齊方式
        //showColumns: true,//列選擇按鈕
        strictSearch: true,
        clickToSelect: true,  //是否啟用點(diǎn)擊選中行
        //height: 460,   //行高，如果沒有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺得表格高度
        uniqueId: "id",   //每一行的唯一標(biāo)識(shí)，一般為主鍵列
        cardView: false,   //是否顯示詳細(xì)視圖
        detailView: false,   //是否顯示父子表
        queryParamsType: 'limit',
        queryParams: queryParams
    });
    //默認(rèn)加載時(shí)攜帶參數(shù)
    function queryParams(params) {
        var params = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
            pageNo : Math.ceil(params.offset/params.limit) + 1, //頁碼
            pageSize : params.limit, //頁面大小
            "status" : $("#status").val()
        };
        return params;
    }
}
//點(diǎn)擊“查詢”按鈕
$("#query").bind("click",function(){
　　//兩種方式：
　　//1.直接刷新 $('#query_results').bootstrapTable("refresh", {});  
　　//2. 先銷毀數(shù)據(jù)，再次查詢，如下
    $("#query_results").bootstrapTable('destroy');
    loadPageData();
});
 
//表格列的格式化翻譯，對(duì)應(yīng)data-formatter="formatStatus"
function formatStatus(value, row, index){
　　if(value == 'S1'){
　　　　return "待處理";
　　}else{
　　　　return "已處理"
　　}
}

以上就是Bootstrap分頁表格插件如何使用的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果如果想了解更多，歡迎來創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：Bootstrap分頁表格插件如何使用-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.rwnh.cn/article14/csjsde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、做網(wǎng)站、網(wǎng)站維護(hù)、商城網(wǎng)站、外貿(mào)建站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)