2017-03-16 70 views
1

我想使用wenzhixin的引导表库(​​),但我的技能似乎不够好,我可以让脚本运行。bootstrap-table(wenzhixin) - > Ajax的数据

我想通过ajax为表提供数据。

这里的其中工程(例如从源页面)代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>SL Time</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <!-- Bootstrap Table --> 
    <link href="css/bootstrap-table.css" rel="stylesheet"> 

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/jquery-3.1.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <!-- Bootstrap Table --> 
    <script src="js/bootstrap-table.js"></script> 
    <script src="js/bootstrap-table-de-DE.js"></script> 
</head> 
<body> 
<div class="container"> 
    <table id="table" 
      data-toggle="table" 
      data-height="460" 
      data-search="true" 
      data-ajax="ajaxRequest" 
      data-side-pagination="server" 
      data-pagination="true"> 
     <thead> 
     <tr> 
      <th data-field="nummer">Nummer</th> 
      <th data-field="name">Name</th> 
     </tr> 
     </thead> 
    </table> 
</div> 
<script> 
// your custom ajax request here 
function ajaxRequest(params) { 
    // data you need 
    console.log(params.data); 
    // just use setTimeout 
    setTimeout(function() { 
     params.success({ 
      total: 100, 
      rows: [{ 
       "nummer": 0, 
       "name": "Item 0", 
      }] 
     }); 
    }, 1000); 
} 

但我想将数据从我的页面 “ajax_loader.php”,它看起来像未来这个:

<?php 
$data=array(); 
array_push($data, array('nummer' => '1', 'name' => 'daniel')); 
array_push($data, array('nummer' => '2', 'name' => 'thomas')); 
echo json_encode($data); 
?> 

但是我如何得到以下一段代码来填补表格(作为示例功能):

$.ajax({ 
     type: "POST", 
     url: "ajax_loader.php", 
     data: "user-id=1", 
     success: function(data) { 
      // At this position my knowledge ends ;-(
     } 
    }); 

任何人都可以帮助我,让事情工作?

问候

丹尼尔

回答

1

的文档是你的朋友^^(另外一个例子:http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/custom-ajax.html)。
严重的是,这里是解决方案:

的HTML:

<div class="container"> 
    <table id="table" 
      data-toggle="table" 
      data-height="460" 
      data-search="true" 
      data-ajax="ajaxRequest" 
      data-side-pagination="server" 
      data-pagination="true"> 
     <thead> 
     <tr> 
      <th data-field="nummer">Nummer</th> 
      <th data-field="name">Name</th> 
     </tr> 
     </thead> 
    </table> 
</div> 

脚本:

// your custom ajax request here 
function ajaxRequest(params) { 

    // data you may need 
    console.log(params.data); 

    $.ajax({ 
     type: "POST", 
     url: "ajax_loader.php", 
     data: "user-id=1", 
// You are expected to receive the generated JSON (json_encode($data)) 
     dataType: "json", 
     success: function (data) { 
      params.success({ 
// By default, Bootstrap table wants a "rows" property with the data 
       "rows": data, 
// You must provide the total item ; here let's say it is for array length 
       "total": data.length 
      }) 
     }, 
     error: function (er) { 
      params.error(er); 
     } 
    }); 
}