Question

我试图使用此处的扩展引导程序表代码制作精美的表格： https://github.com/wenzhixin/bootstrap-table

这是一个非常受欢迎的项目，但桌子不以任何方式互动，我不知道为什么。奇怪的是，可引导的Js将数据放入html表中：

 $(function () {
        $('#datatable').bootstrapTable({
            striped: true,
            pagination: true,
            showColumns: true,
            showToggle: true,
            showExport: true,
            sortable: true,
            paginationVAlign: 'both',
            pageSize: 25,
            pageList: [10, 25, 50, 100, 'ALL'],
            columns: [{'field': 'Name', 'title': 'Name'}, {'field': 'Age', 'title': 'Age'}],  // here is where we use the column content from our Django View
            data: [{"Name":"Alex","Age":10},{"Name":"Bob","Age":12},{"Name":"Clarke","Age":13}] // here is where we use the data content from our Django View. we escape the content with the safe tag so the raw JSON isn't shown.
        });
    });

因此，在HTML中生成表的事实应该意味着bootstrapTable代码正在运行。但没有一个奇特的功能（分页，排序）工作。

工作示例： https://jsfiddle.net/wouterr5/b4huLLt8/1/

Answer 1

我相信你遇到的问题是你只是忘了包含Bootstrap的CSS。你有它的JavaScript组件但没有包含CSS，所有的样式都无法应用。

https://jsfiddle.net/9whpma70/

＆＃13;

$(function () {
  $('#datatable').bootstrapTable({
    striped: true,
    pagination: true,
    showColumns: true,
    showToggle: true,
    showExport: true,
    sortable: true,
    paginationVAlign: 'both',
    pageSize: 25,
    pageList: [10, 25, 50, 100, 'ALL'],
    columns: [{'field': 'Name', 'title': 'Name'}, {'field': 'Age', 'title': 'Age'}],  // here is where we use the column content from our Django View
    data: [{"Name":"Alex","Age":10},{"Name":"Bob","Age":12},{"Name":"Clarke","Age":13}] // here is where we use the data content from our Django View. we escape the content with the safe tag so the raw JSON isn't shown.
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>

<table id="datatable"></table>

＆＃13;

Bootstraptable并不能使表格具有交互性

1 个答案: