bootstrap table表格内容居中对齐

发布于

官方网站： http://bootstrap-table.wenzhixin.net.cn/ 参考文档：http://issues.wenzhixin.net.cn/bootstrap-table/index.html 中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table

在开发项目的时候，发现了一款JS组件系列——表格组件神器 ，官方文档也比较简单，总结了一些常遇到的问题

实现一个简单的表格和分页，内容居中对齐

图片.png

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

&lt;head&gt;
    &lt;meta charset=&#34;UTF-8&#34; /&gt;
    &lt;title&gt;Dashboard | Nadhif - Responsive Admin Template&lt;/title&gt;

    &lt;link href=&#34;https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34;&gt;
    &lt;!-- 引入bootstrap-table样式 --&gt;
    &lt;link href=&#34;https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css&#34; rel=&#34;stylesheet&#34;&gt;
    &lt;!-- jquery及bootstrapjs --&gt;
    &lt;script src=&#34;https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js&#34;&gt;&lt;/script&gt;
    &lt;script src=&#34;https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js&#34;&gt;&lt;/script&gt;

    &lt;!-- bootstrap-table.min.js --&gt;
    &lt;script src=&#34;https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js&#34;&gt;&lt;/script&gt;
    &lt;!-- 引入中文语言包 --&gt;
    &lt;script src=&#34;https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js&#34;&gt;&lt;/script&gt;
    &lt;style&gt;
        /* 表格样式 */
        
        .table&gt;tbody&gt;tr&gt;td {
            border: 0px;
            text-align: center;
        }
        
        .bootstrap-table .table thead&gt;tr&gt;th {
            text-align: center;
        }
        
        .table thead {
            background: #ebeaea;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;table id=&#34;mytab&#34; class=&#34;table table-hover&#34;&gt;&lt;/table&gt;
    &lt;script&gt;
        $(&#39;#mytab&#39;).bootstrapTable({
            url: &#39;data1.json&#39;,
            queryParams: &#34;queryParams&#34;,
            toolbar: &#34;#toolbar&#34;,
            sidePagination: &#34;true&#34;,
            striped: true, // 是否显示行间隔色
            //search : &#34;true&#34;,
            uniqueId: &#34;ID&#34;,
            pageSize: &#34;5&#34;,
            pagination: true, // 是否分页
            sortable: true, // 是否启用排序
            columns: [{
                    field: &#39;id&#39;,
                    title: &#39;登录名&#39;
                },
                {
                    field: &#39;name&#39;,
                    title: &#39;昵称&#39;
                },
                {
                    field: &#39;price&#39;,
                    title: &#39;角色&#39;
                },
                {
                    field: &#39;price&#39;,
                    title: &#39;操作&#39;,
                    width: 120,
                    align: &#39;center&#39;,
                    valign: &#39;middle&#39;,
                    formatter: actionFormatter,
                },

            ]
        });
        //操作栏的格式化
        function actionFormatter(value, row, index) {
            var id = value;
            var result = &#34;&#34;;
            result += &#34;&lt;a href=&#39;javascript:;&#39; class=&#39;btn btn-xs green&#39; onclick=\&#34;EditViewById(&#39;&#34; + id + &#34;&#39;, view=&#39;view&#39;)\&#34; title=&#39;查看&#39;&gt;&lt;span class=&#39;glyphicon glyphicon-search&#39;&gt;&lt;/span&gt;&lt;/a&gt;&#34;;
            result += &#34;&lt;a href=&#39;javascript:;&#39; class=&#39;btn btn-xs blue&#39; onclick=\&#34;EditViewById(&#39;&#34; + id + &#34;&#39;)\&#34; title=&#39;编辑&#39;&gt;&lt;span class=&#39;glyphicon glyphicon-pencil&#39;&gt;&lt;/span&gt;&lt;/a&gt;&#34;;
            result += &#34;&lt;a href=&#39;javascript:;&#39; class=&#39;btn btn-xs red&#39; onclick=\&#34;DeleteByIds(&#39;&#34; + id + &#34;&#39;)\&#34; title=&#39;删除&#39;&gt;&lt;span class=&#39;glyphicon glyphicon-remove&#39;&gt;&lt;/span&gt;&lt;/a&gt;&#34;;
            return result;
        }
    &lt;/script&gt;
&lt;/body&gt;



</html>

json数据：

代码语言：javascript
复制
    [

{

"id": 0,

"name": "Item 0",

"price": "$0&#34;

},

{

"id": 1,

"name": "Item 1",

"price": "$1&#34;

},

{

"id": 2,

"name": "Item 2",

"price": "$2&#34;

},

{

"id": 3,

"name": "Item 3",

"price": "$3&#34;

},

{

"id": 4,

"name": "Item 4",

"price": "$4&#34;

},

{

"id": 5,

"name": "Item 5",

"price": "$5&#34;

},

{

"id": 6,

"name": "Item 6",

"price": "$6&#34;

},

{

"id": 7,

"name": "Item 7",

"price": "$7&#34;

},

{

"id": 8,

"name": "Item 8",

"price": "$8&#34;

},

{

"id": 9,

"name": "Item 9",

"price": "$9&#34;

},

{

"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"

}

]

效果如下所示

#bootstrap#http