Bootstrap table 简单示例

最新推荐文章于 2025-05-29 11:56:13 发布

原创最新推荐文章于 2025-05-29 11:56:13 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了Bootstrap Table的基本使用方法，包括如何通过简单的HTML结构创建一个功能丰富的表格，并概述了部分配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近开始要写一个bootstrap table。之前做过一个例子，但是具体细节不太清楚了，这次又要重新查一边细节。

bootstrap table应该是一个中国人写的，功能十分强大，但是例子很少。至少我在看的时候感觉挺麻烦的。也许没有找到方法。

其实生成bootstrap table方法很简单。

<table data-toggle="table" id="dataTable" data-url="data/contracts.json" data-single-select="true" data-click-to-select="true">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="contractNum">contractNum</th>
<th data-field="idCard">idCard</th>
<th data-field="status">status</th>
</tr>
</thead>
</table>

这样声明一下就可以了，data-url是如何得到数据的。其他的属性也很容易理解。

具体有哪些属性，可以直接参考bootstrap table js的内容。我也只用了一点点，给自己留个备忘录吧，以后需要的时候再研究研究。

BootstrapTable.DEFAULTS = {
        classes: 'table table-hover',
        sortClass: undefined,
        locale: undefined,
        height: undefined,
        undefinedText: '-',
        sortName: undefined,
        sortOrder: 'asc',
        sortStable: false,
        striped: false,
        columns: [[]],
        data: [],
        totalField: 'total',
        dataField: 'rows',
        method: 'get',
        url: undefined,
        ajax: undefined,
        cache: true,
        contentType: 'application/json',
        dataType: 'json',
        ajaxOptions: {},
        queryParams: function (params) {
            return params;
        },
        queryParamsType: 'limit', // undefined
        responseHandler: function (res) {
            return res;
        },
        pagination: false,
        onlyInfoPagination: false,
        paginationLoop: true,
        sidePagination: 'client', // client or server
        totalRows: 0, // server side need to set
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        paginationHAlign: 'right', //right, left
        paginationVAlign: 'bottom', //bottom, top, both
        paginationDetailHAlign: 'left', //right, left
        paginationPreText: '&lsaquo;',
        paginationNextText: '&rsaquo;',
        search: false,
        searchOnEnterKey: false,
        strictSearch: false,
        searchAlign: 'right',
        selectItemName: 'btSelectItem',
        showHeader: true,
        showFooter: false,
        showColumns: false,
        showPaginationSwitch: false,
        showRefresh: false,
        showToggle: false,
        buttonsAlign: 'right',
        smartDisplay: true,
        escape: false,
        minimumCountColumns: 1,
        idField: undefined,
        uniqueId: undefined,
        cardView: false,
        detailView: false,
        detailFormatter: function (index, row) {
            return '';
        },
        trimOnSearch: true,
        clickToSelect: false,
        singleSelect: false,
        toolbar: undefined,
        toolbarAlign: 'left',
        checkboxHeader: true,
        sortable: true,
        silentSort: true,
        maintainSelected: false,
        searchTimeOut: 500,
        searchText: '',
        iconSize: undefined,
        buttonsClass: 'default',
        iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
        icons: {
            paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
            paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
            refresh: 'glyphicon-refresh icon-refresh',
            toggle: 'glyphicon-list-alt icon-list-alt',
            columns: 'glyphicon-th icon-th',
            detailOpen: 'glyphicon-plus icon-plus',
            detailClose: 'glyphicon-minus icon-minus'
        },