bootstrap-table (wenzhixin) --> Ajax 的数据

Posted

技术标签:

【中文标题】bootstrap-table (wenzhixin) --> Ajax 的数据【英文标题】:bootstrap-table (wenzhixin) --> Data by Ajax 【发布时间】:2017-08-08 03:41:53 【问题描述】:

我想使用 wenzhixin (http://bootstrap-table.wenzhixin.net.cn/) 的引导表库,但我的技能似乎还不够好,无法运行脚本。

我希望通过 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-
           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-
           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);
        
    );

【讨论】:

【参考方案2】:

params.success 是函数!你需要更多的参数,像这样

function ajaxRequest(params) 
    $.ajax(
        type: "POST",
        url: "/gruzin/getdb",
        success: function (data) 
            console.log(data);
            params.success(
                "rows": data,
                "total": data.length
            ,null,);
        ,
        error: function (er) 
            params.error(er);
        
    );

【讨论】:

以上是关于bootstrap-table (wenzhixin) --> Ajax 的数据的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap-table : 中文文本

bootstrap-table (wenzhixin) --> Ajax 的数据

Bootstrap-table 动态改变表格高度

bootstrap-table+Thinkphp实现server分页

bootstrap-table - 如何设置表格行背景颜色

bootstrap-table前端修改数据