BoostrapTable表格

来源：互联网发布：淘宝生意参谋选词助手编辑：程序博客网时间：2024/06/06 03:26

一、数据加载，前后台交互

1. 直接html获取数据

这样定义了表格结构，也把后台返回的数据通过EL表达式显示数据。

                   <table id="table"                            data-pagination="true"                           data-page-list="[5,10,20,50,100,200]"                           data-toggle="table">                        <thead>                            <tr class="alert-info">                                    <th data-align="center">index</th>                                    <th data-align="center">name</th>                                </tr>                        </thead>                        <tbody>                            <c:forEach items="${child}" var="li" varStatus="vs">                                <tr>                                    <td>${vs.index+1}</td>                                    <td><a href="childInfo?childID=${li.id}">${li.name}</a></td>                                </tr>                            </c:forEach>                        </tbody>                    </table>

2. 通过定义对象加载

html中定义表头或者js中定义columns都可以

        <table id="table">            <thead>            <tr>                <th data-field="id">ID</th>                <th data-field="name">Item Name</th>                <th data-field="price">Item Price</th>            </tr>            </thead>        </table>    </div><script>    var $table = $('#table');    $(function () {        var data = [            {                "id": 0,                "name": "Item 0",                "price": "$0"            },            {                "id": 1,                "name": "Item 1",                "price": "$1"            },            {                "id": 2,                "name": "Item 2",                "price": "$2"            }        ];        $table.bootstrapTable({data: data});    });

3. 通过url发送请求获取

(1) 直接发送请求

 //定义表格模型 var columnModel =  [{        field: 'state',        checkbox:true,        title: '选择'    }, {        field: 'index',        formatter:indexFormatter,//可定义这一列的一些样式        title: 'index'    },        {        field: 'id',        title: 'Item ID'    }, {        field: 'name',        title: 'Item Name'    }, {        field: 'price',        title: 'Item Price'    }]； $table.bootstrapTable({ method:'get', url:'loadData', //ajax请求或者外部文件路径都可以 columns:columnModel }); /**  * 显示行号  */ function indexFormatter(value,row,index){     return index+1; } /**  * 改为链接，或者增加一些样式 */function indexFormatter(value,row,index){     return [       '<a href="javascript:getId('+row.id+');" title="getId">',       '<i class="glyphicon glyphicon-export" aria-hidden="true"></i>',       '</a>'      ].join(''); }

（2）更改请求

 $table.bootstrapTable('refresh',{ url:'loadDateAgain?param1='+param1+'param2='+param2});

当然也可以更改其他的属性。

（3）外部文件加载

 <table id="table"         data-toggle="table"         data-url="../json/data2.json"></table>

或者

 $table.bootstrapTable({ method:'get', url:'json/data2.json', //ajax请求或者外部文件路径都可以 pagination:true, sidePagination:'client', pageNumber:1, pageSize:10, pageList:[5,10,15,20,50,100,200], columns:columnModel });

二、翻页

1. 前台翻页

一次性获取了全部的数据，从前台进行翻页, 可以在js或者html中定义

 $table.bootstrapTable({ method:'get', url:'loadHistory', pagination:true, sidePagination:'client', pageNumber:1, pageSize:10, pageList:[5,10,15,20,50,100,200], columns:columnModel });

2. 后台翻页

从后台获取指定的页码的数据

  $table.bootstrapTable({ method:'get', url:'loadData', pagination:true, sidePagination:'server', pageNumber:1, //默认的页码 pageSize:10, //默认每页数据量 pageList:[5,10,15,20,50,100,200],  queryParams: queryParams, //返回传给后台的参数     queryParamsType: "notlimit",//'limit', the params object contains:  limit, offset, search, sort, order;         //Else, it contains: pageSize, pageNumber, searchText, sortName, sortOrder. Return false to stop request.         responseHandler: responseHandler,//对返回数据的预处理 columns:columnModel  });   /** * 分页参数 */function queryParams(params) { return { pageSize:params.pageSize, pageNumber:params.pageNumber } } /** *返回数据格式化 */function responseHandler(res){return {"rows":res.list,"total":res.rowsCount}}

0 0