Bootstraptableは、インタラクティブなテーブルを作っていない

Question

私はここから延長ブートストラップテーブルコードを使用して派手なテーブルを作成しようとしている： https://github.com/wenzhixin/bootstrap-table

はそれは非常に人気のあるプロジェクトだが、テーブルにはどのような方法で、インタラクティブではありませんなぜか分からない。 何奇妙なことはbootstraptable 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

私はあなたが抱えている問題は、あなたは、単にブートストラップのCSSを含めるのを忘れていることであると信じています。あなたはJavaScriptコンポーネントを持っていますが、CSSがなくてもすべてのスタイルが適用されません。

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>