如何使用引导表从服务器加载数据？

Question

如何使用引导表从服务器加载数据？

我正在使用 bootstrap-table 插件在 HTML 表中显示来自服务器的数据，但我无法让它工作。这是插件网址： http: //bootstrap-table.wenzhixin.net.cn/

这是我的代码：

<table data-url="http://wenzhixin.net.cn/examples/bootstrap_table/data"  data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-toggle="table" id="table">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>

Run Code Online (Sandbox Code Playgroud)

我已经加载了所有必需的文件，但这不起作用。

这是小提琴： http: //jsfiddle.net/qoyho5jg/

Answer 1

age*_*tpx 0

确保将此代码放入网页的 head 元素中

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.5.0/bootstrap-table.min.css">

 <!-- Latest compiled and minified JavaScript -->  
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.5.0/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales --> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.5.0/locale/bootstrap-table-zh-CN.min.js"></script>


 <html>
    <head>
       /* Put the scripts above here...*/

     /*You missed to place this script*/
     /*Of course you need to modify the correct URL and data 
      If you can give me your URL then I can post a sample ajax call for that*/


  $('#table').bootstrapTable({
    url: 'data1.json',
    columns: [{
       field: 'id',
       title: 'Item ID'
       },
       {field: 'name',
        title: 'Item Name'
       }, 
      {
         field: 'price',
        title: 'Item Price'
       }, ]
      });

    </head>
    <body>

       <table data-url="http://wenzhixin.net.cn/examples/bootstrap_table/data"  data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-toggle="table" id="table">
       <thead>
       <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
          <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
          <th data-field="price" data-sortable="true">Item Price</th>
       </tr>
       </thead>
     </table>
   </body>
 </html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，10 月前
查看次数：	27787 次
最近记录：	4 年，9 月前