CODEWITHSUNDEEP
twitter-bootstrapbootstrap-table
Plumpie
Plumpie

Reputation: 466

Bootstraptable isn't making the table interactive

I'm trying to make a fancy table using the extended bootstrap table code from here: https://github.com/wenzhixin/bootstrap-table

It's a very popular project but the table isn't interactive in any way and I don't know why. What is strange is that the bootstraptable Js puts the data into a html-table:

 $(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.
        });
    });

So the fact that a table is produced in the HTML should mean that the bootstrapTable code is running. But none of the fancy features (pagination, sorting) work.

Working example: https://jsfiddle.net/wouterr5/b4huLLt8/1/

Upvotes: 0

Views: 139

Answers (1)

Robert
Robert

Reputation: 6967

I believe the issue you're having is that you simply forgot to include Bootstrap's CSS. You have its JavaScript component but without the CSS included all of the styles fail to get applied.

https://jsfiddle.net/9whpma70/

$(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.
  });
});
<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>

Upvotes: 2

Related Questions