一：实现一个简单的表格和分页

图片.png

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>Dashboard | Nadhif - Responsive Admin Template</title>

        <link rel="stylesheet" href="../../../css/bootstrap.min.css">

        <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">

        <script src="../../../js/jquery.min.js"></script>

        <script src="../../../js/bootstrap.min.js"></script>

        <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>

        <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

    </head>

    <body>

        <table id="mytab" class="table table-hover"></table>

        <script>

            $('#mytab').bootstrapTable({

                url: 'data1.json',

                queryParams: "queryParams",

                toolbar: "#toolbar",

                sidePagination: "true",

                striped: true, // 是否显示行间隔色

                //search : "true",

                uniqueId: "ID",

                pageSize: "5",

                pagination: true, // 是否分页

                sortable: true, // 是否启用排序

                columns: [{

                        field: 'id',

                        title: '登录名'

                    },

                    {

                        field: 'name',

                        title: '昵称'

                    },

                    {

                        field: 'price',

                        title: '角色'

                    },

                    {

                        field: 'price',

                        title: '操作',

                        width: 120,

                        align: 'center',

                        valign: 'middle',

                        formatter: actionFormatter,

                    },

                ]

            });

            //操作栏的格式化

            function actionFormatter(value, row, index) {

                var id = value;

                var result = "";

                result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";

                result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";

                result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

                return result;

            }

        </script>

    </body>

</html>

json数据：

    [

        {

            "id": 0,

            "name": "Item 0",

            "price": "$0"

        },

        {

            "id": 1,

            "name": "Item 1",

            "price": "$1"

        },

        {

            "id": 2,

            "name": "Item 2",

            "price": "$2"

        },

        {

            "id": 3,

            "name": "Item 3",

            "price": "$3"

        },

        {

            "id": 4,

            "name": "Item 4",

            "price": "$4"

        },

        {

            "id": 5,

            "name": "Item 5",

            "price": "$5"

        },

        {

            "id": 6,

            "name": "Item 6",

            "price": "$6"

        },

        {

            "id": 7,

            "name": "Item 7",

            "price": "$7"

        },

        {

            "id": 8,

            "name": "Item 8",

            "price": "$8"

        },

        {

            "id": 9,

            "name": "Item 9",

            "price": "$9"

        },

        {

            "id": 10,

            "name": "Item 10",

            "price": "$10"

        },

        {

            "id": 11,

            "name": "Item 11",

            "price": "$11"

        },

        {

            "id": 12,

            "name": "Item 12",

            "price": "$12"

        },

        {

            "id": 13,

            "name": "Item 13",

            "price": "$13"

        },

        {

            "id": 14,

            "name": "Item 14",

            "price": "$14"

        },

        {

            "id": 15,

            "name": "Item 15",

            "price": "$15"

        },

        {

            "id": 16,

            "name": "Item 16",

            "price": "$16"

        },

        {

            "id": 17,

            "name": "Item 17",

            "price": "$17"

        },

        {

            "id": 18,

            "name": "Item 18",

            "price": "$18"

        },

        {

            "id": 19,

            "name": "Item 19",

            "price": "$19"

        },

        {

            "id": 20,

            "name": "Item 20",

            "price": "$20"

        }

    ]

二：说一说BootstrapTable的属性一览表



            url: '/Home/GetDepartment',         //请求后台的URL（*）

            method: 'get',                      //请求方式（*）

            toolbar: '#toolbar',                //工具按钮用哪个容器

            striped: true,                      //是否显示行间隔色

            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

            pagination: true,                   //是否显示分页（*）

            sortable: false,                     //是否启用排序

            sortOrder: "asc",                   //排序方式

            queryParams: oTableInit.queryParams,//传递参数（*）

            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）

            pageNumber:1,                       //初始化加载第一页，默认第一页

            pageSize: 10,                       //每页的记录行数（*）

            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）

            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

            strictSearch: true,

            showColumns: true,                  //是否显示所有的列

            showRefresh: true,                  //是否显示刷新按钮

            minimumCountColumns: 2,             //最少允许的列数

            clickToSelect: true,                //是否启用点击选中行

            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列

            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮

            cardView: false,                    //是否显示详细视图

            detailView: false,                   //是否显示父子表

            columns: [{

}]

三：bootstrap-table如何设置首行变色，其他行不变色

其实很简单，在代码之中找到首行对应的代码，然后添加属性即可

图片.png

#mytab  thead{background: #5488c4;}

四：添加删除数据之后表格自动刷新加载

$table.bootstrapTable('refresh');

五：如何设置bootstrap-table插件的隔行变色的颜色

图片.png

代码样式如下

<style>

#mytab tr:nth-child(even){

background:#f4f8fb;

}

</style>

、

BootstrapTable的使用教程的更多相关文章

Boostrap bootstrap-table插件使用教程
bootstrap table 简介及特性简介 Bootstrap table 是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序 ...
bootstrap-table教程演示
Bootstrap Admin 效果展示 Table of contents Create Remove Update Export Tree Create 相关插件 bootstrap-valida ...
表格插件BootStrap-Table使用教程
Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件,功能比较完备,能够实现数据异步获取,编辑,排序等一系列功能. 官网https://bootstrap-tab ...
BootstrapTable的简单使用教程
1.引入必须的几个包 <link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="boo ...
bootstrap-table填坑之旅<一>认识bootstrap-table
应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...
github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
bootstrapTable
一个详细的教程 table参数 bootstrap table使用总结 BootstrapTable使用实例事件event 事件函数的用法: 方法1 $('#table').bootstrapTab ...
bootstrapTable 学习使用
Bootstrap离线API Bootstrap Table 离线API <input type="button" id="btn_searcher" v ...
bootstrap table教程--后台数据绑定、特殊列处理、排序
上一篇文章介绍了基本的使用教程.本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行 ...

随机推荐

1.3 Quick Start中 Step 2: Start the server官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 2: Start the server Step : 启动服务 Kafka ...
css 0.5px
1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了代码如下: div { positon ...
语音识别系统：有免费实用的"语音到文字"的软件么？
自从看了<李开复自传>,就对"语音识别系统"产生了非常深刻的印象. 根据自己的判断,语音识别系统还是非常有用的. 以自己的实际需求来看: 1.中国象棋中的应用. 中国象 ...
Android 监听电量的状态
监控手机电量的变化和充电状态在BatteryManager中有一个粘性广播,不需要BroadcastReceiver作为接收器,在注册时将传入null IntentFilter filter = n ...
最新GitHub新手使用教程(Windows Git从安装到使用)——详细图解
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.叙述 1.Git简介 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本 ...
Day2：模块初识
一.模块(库) 别人写好的一堆功能,封装起来,你直接导入就可以用,就不用自己再写一次,使用import方法二.分类:标准库与第三方库标准库:免安装,导入即可使用,最常用的一些功能第三方库:需要下 ...
android 5.x system.img 大于2G导致编译otapackage时报错怎样处理
当system分区预制过多apk时假设img size超过2G 在make otapackage时会报例如以下错误 zipfile.LargeZipFile: Zipfile size would ...
php课程 10-34 目录遍历中的注意事项是什么
php课程 10-34 目录遍历中的注意事项是什么一.总结一句话总结:用scandir,会把目录和文件放到一个数组中. 1.移动文件怎么实现,php里面没有移动文件这个函数? 先复制,再删除 2 ...
Android中CursorLoader的使用、原理及注意事项
前言最近在项目中涉及到了即时聊天,因此不可避免地要用到实时刷新的功能,因为在以前的项目中见到别人使用CursorLoader+CursorAdapter+ContentProvider的机制来实现实 ...
iOS_05_iOS设备发展史
ios设备发展史 IPhone一代 * 2007年发布. * 支持电子邮件.移动电话.短信.网络浏览等. * 采取触摸键盘 * 3.5英寸,480 x 320像素. * 后置摄像投200万像素. IP ...

BootstrapTable的使用教程

一：实现一个简单的表格和分页

二：说一说BootstrapTable的属性一览表

三：bootstrap-table如何设置首行变色，其他行不变色

四：添加删除数据之后表格自动刷新加载

五：如何设置bootstrap-table插件的隔行变色的颜色

BootstrapTable的使用教程的更多相关文章

随机推荐

热门专题