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

原创 2016年06月01日 10:45:27

参考: 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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

bootstrap-table插件数据加载方式

jquery ajax bootstrap-table赋值

通过AJAX获取ashx后台JSON数据并使用bootstrap-Table控件

最近项目的表格使用了bootstrap-Table控件,研究了一下直接上代码:JS代码(这个只是客户端获取数据并不是服务端):function initTable() { jQuery.aja...

Bootstrap结合BootstrapTable的使用

Bootstrap结合BootstrapTable的使用,分为两种模试显示列表。 引用的css:       引用的JS: 常用方法: 刷新表格:$table.bootstrapTable(...

bootstrap ,中从数据库动态读取下拉框,点击后并传值到文本框

function showsmsselect() { $.ajax({ url : "../aaa/list.do", //所需要的列表接口地址 type : "get", da...

实战学习NodeJS建站(3)—bootstrap后台管理、nodejs访问数据库

前一篇:介绍了nodejs的blog的结构、bootstrap 请点击文章最后 阅读原文 查看 本篇文章对应的最新源码下载: 链接:http://pan.baidu.com/s/1pLMZaoN ...

Bootstrap-table使用详细介绍

bootstrap-table是一个非常好用的表格插件,提供了很多工具及分页、搜索等功能。 首先我们需要下面几个文件, 中文包好像可以防止某些bug 如果你单独引入这些文件而导致样...

Bootstrap-Table实现从服务器加载数据进行显示

Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中。当然,这需要配置一些参数并进行初始化表格才行。其官方网站地址为:http://bootstrap-t...

bootstrap table 服务端

//初始化用户列表 $("#usergroud").bootstrapTable({ method: 'post', url: '/Wx_UserGroup/GetUserInfo', cache: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)