【第22期】观点:IT 行业加班,到底有没有价值?

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>


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

相关文章推荐

web项目开发 之 前端规范 --- JSON数据传输规范

此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文档。供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力。场景:前后端分离 异步利用JSON...

Bootstrap Table

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。 http://b...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

Bootstrap table的一些简单使用总结

最近接触一个NB插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛X。 构造方式 1...

Bootstrap结合BootstrapTable的使用

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

BootStrapTable参数方法

表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 class...

Bootstrap-table使用详细介绍

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

bootstrap table使用总结

使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑。下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较...

基于BootstrapTable的简单应用

Bootstrap Table基于Bootstrap的jQuery表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。 本文将以一个基于Boot...

bootstrapTable Rows

// 关键词: bootstrapTable源码分析  BootstrapTable.DEFAULTS = { classes: 'table table-hover', ...

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

阅读目录 一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案 1、文本框2、时间选择框3、下拉框4、复选框5、...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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