bootstrap-table的入门使用——从服务器获取数据

来源：互联网发布：mac水漾轻盈粉底液编辑：程序博客网时间：2024/05/29 02:56

参考： Bootstrap Table 查询（服务器端）、刷新数据

这里需要使用 bootstrap-table 插件。使用了CSS3loader显示加载过程。

效果如下：

index.html

<!DOCTYPE html><html><head>    <title>Refresh from url after use data option</title>    <meta charset="utf-8">    <link rel="stylesheet" href="bootstrap.min.css">    <link rel="stylesheet" href="bootstrap-table.min.css">    <script src="jquery.min.js"></script>    <script src="bootstrap.min.js"></script>    <script src="bootstrap-table.min.js"></script>    <link rel="stylesheet" href="CSS3loader/loaders.css">    <style>        div.loader .loader-inner {            position: absolute;            left: 50%;            margin: 20px 0 50px -76px;            text-align: center;        }        div.loader>.ball-pulse>div {            background-color: #2f96b4;        }    </style></head><body><div class="container">    <h1>Refresh from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>    <p><button id="button" class="btn btn-default">Refresh from url</button></p>    <table id="table" class="table table-bordered">        <thead>        <tr>            <th data-field="id">ID</th>            <th data-field="name">Item Name</th>            <th data-field="active">Item Price</th>            <th data-field="user_id">Item Price</th>            <th data-field="no_of_reports">Item Price</th>        </tr>        </thead>    </table></div><script>    $(function () {        var $table = $('#table');        //$table.bootstrapTable({data:[]});        $.ajax({            url: 'index.php',            type: 'post',            dataType: 'json',            beforeSend: function () {                $('#table').append('<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>');            },            success: function (d) {                setTimeout(function () {                    $('#table>div.loader').remove();                    $table.bootstrapTable({                        data: d                    });                }, 2000);            }        });        /*$table.bootstrapTable({            data: [{                "id": 0,                "name": "Item 0",                "active": 0,                "user_id": 0,                "no_of_reports": 0            }]        });*/        $('#button').click(function () {            $table.bootstrapTable('refresh', {url: 'index.php'});        });    });</script></body></html>

index.php

<?php/** * Created by PhpStorm. * User: DreamBoy * Date: 2016/6/1 * Time: 10:16 */$res = array(    array('id' => 33, 'name' => '444', 'active' => 0, 'user_id' => 1, 'no_of_reports' => 0),    array('id' => 29, 'name' => 'AAA', 'active' => 1, 'user_id' => 1, 'no_of_reports' => 0),    array('id' => 20, 'name' => 'aasdasd', 'active' => 1, 'user_id' => 1, 'no_of_reports' => 0));echo json_encode($res);

升级版（新增排序功能+

bootstrapTable('destroy')

的使用）：

index.html

<!DOCTYPE html><html><head>    <title>Refresh from url after use data option</title>    <meta charset="utf-8">    <link rel="stylesheet" href="bootstrap.min.css">    <link rel="stylesheet" href="bootstrap-table.min.css">    <script src="jquery.min.js"></script>    <script src="bootstrap.min.js"></script>    <script src="bootstrap-table.min.js"></script>    <link rel="stylesheet" href="CSS3loader/loaders.css">    <style>        div.loader .loader-inner {            position: absolute;            left: 50%;            margin: 20px 0 50px -76px;            text-align: center;        }        div.loader>.ball-pulse>div {            background-color: #2f96b4;        }    </style></head><body><div class="container">    <h1>Refresh from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>    <p><button id="button" class="btn btn-default">Refresh from url</button></p>    <table id="table" class="table table-hover" data-classes="table table-hover"           data-striped="true"  data-sort-name="stargazers_count"           data-sort-order="desc">        <thead>        <tr>            <th data-field="id" data-sortable="true">ID</th>            <th data-field="name" data-sortable="true">Item Name</th>            <th data-field="active">Item Price</th>            <th data-field="user_id">Item Price</th>            <th data-field="no_of_reports">Item Price</th>        </tr>        </thead>    </table></div><script>    $(function () {        var $table = $('#table');        $table.bootstrapTable({data:[]});        $.ajax({            url: 'index.php',            type: 'post',            dataType: 'json',            beforeSend: function () {                $('#table').append('<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>');            },            success: function (d) {                setTimeout(function () {                    $('#table>div.loader').remove();                    /*$table.bootstrapTable({                        data: d                    });*/                    $table.bootstrapTable('destroy').bootstrapTable({                        data: d                    });                }, 2000);            }        });        /*$table.bootstrapTable({            data: [{                "id": 0,                "name": "Item 0",                "active": 0,                "user_id": 0,                "no_of_reports": 0            }]        });*/        $('#button').click(function () {            $table.bootstrapTable('refresh', {url: 'index.php'});        });    });</script></body></html>

1 0