bootstrap table插件使用说明demo

展示结果截图:




1.下载bootstrap table插件,下载

2.导入插件相关的css和js文件,当然bootstrap框架的基本组件必须导入

<link rel="stylesheet" href="bootstrap3/plugins/bootstrap-table/dist/bootstrap-table.min.css">
<script src="bootstrap3/plugins/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="bootstrap3/plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

3.body中添加一个table,给一个id,添加一个搜索的工具栏

<div class="search_bar form-inline" id="search_bar">
			<span>著作:</span>
			<select class="form-control" id="search_copyright">
			  <option value="">全部</option>
			  <option value="Original">原创</option>
			  <option value="Reproduced">转载</option>
			  <option value="Translation">翻译</option>
			</select>
			<span>状态:</span>
			<select class="form-control" id="search_status">
			  <option value="">全部</option>
			  <option value="Normal">已发布</option>
			  <option value="UnAudit">待审核</option>
			</select>
			<span>排序:</span>
			<select class="form-control" id="search_order">
			  <option value="createTime"  title="创建时间排序">创时</option>
			  <option value="updateTime" title="更新时间排序" selected="selected">更时</option>
			</select>
			<span>标题:</span>
			<input type="text" class="form-control" placeholder="输入博客标题" id="serach_title">&nbsp;<button class="btn btn-default" id="search_btn">查询</button>&nbsp;
			</div>
<table id="table"></table>

4.写js

$(function(){
    $('#table').bootstrapTable({
        url:'manager/blog/list.json',
        method:'get',
        contentType:'application/json',
        showColumns: true, //显示隐藏列  
        showRefresh: true,  //显示刷新按钮
        toolbar:'#search_bar',
        queryParams:queryPrams,
         pagination: true, 
         pageSize: 10,
         pageList:[10],
         sidePagination: "server",
        columns: [{
            field: 'title',
            title: '博客标题'
        },{
            field: 'authorName',
            title: '作者'
        },{
            field:'copyright',
            title:'版权',
            formatter:function(value,row,index){
                var cp=value;
                if(value=='Reproduced'){
                    cp='转载';
                }else if(value=='Translation'){
                    cp='翻译';
                }else if(value=='Original'){
                    cp='原创';
                }
                return cp;
            },
             width:50
        },{
            field: 'autoAuditDate',
            title: '自动审核日期'
        },{
            field: 'status',
            title: '状态',
            formatter:function(value,row,index){
                var status=value;
                if(value=='Normal'){
                    status='正常';
                }else if(value=='UnAudit'){
                    status='待审核';
                }else if(value=='Refuse'){
                    status='驳回';
                }else if(value=='AutoAudit'){
                    status='自审核';
                }
                return status;
            },
            width:60
        },{
            field: 'updateTime',
            title: '更新时间',
            formatter:function(value,row,index){
                return $.timestamp2string(value,'yyyy-MM-dd hh:mm:ss');
            },
            width:170
        },{
            field: 'id', 
            title:'操作',
            formatter:function(value,row,index){
                var p='<a class="btn btn-xs btn-default" title="预览博客" href="manager/blog/view/'+value+'.html" target="_blank">预</a>&nbsp;';
                var a='<button class="btn btn-xs btn-success" title="通过审核" onclick="audit('+value+')">审</button>&nbsp;';
                var auto='<button class="btn btn-xs btn-success" title="定时自动审核" onclick="auditAuto('+value+')">定</button>&nbsp;';
                var r='<button class="btn btn-xs btn-default" title="拒绝审核" onclick="auditCanncel('+value+')">驳</button>&nbsp;';
                return p+a+auto+r;
            },
            width:130
        }]
    })
//查询事件绑定
    $('#search_btn').click(function(){
        $("#table").bootstrapTable('refresh');
    });
    $('#search_status').change(function(){
        $("#table").bootstrapTable('refresh');
    });
    $('#search_copyright').change(function(){
        $("#table").bootstrapTable('refresh');
    });
    $('#search_order').change(function(){
        $("#table").bootstrapTable('refresh');
    });