bootstrap-table分页表格

官网地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
翻译过的中文API:http://blog.csdn.net/rickiyeat/article/details/56483577
Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 如下:
http://www.cnblogs.com/landeanfen/p/5157595.html 一年前某大神写的
http://www.cnblogs.com/landeanfen/p/7095414.html 一年后某大神写的

刷新表格 :  $('#tableOrderCash').bootstrapTable('refresh');
表格初始化:  loadMarAdvertListPage();  //重新调用表格方法

一、引入css和 js(中文包的j bootstrap-table-zh-CN.js不记得要不要引入了)
二、初始化实例

function loadMarAdvertListPage() {
        $('#tableMarAdvertList').bootstrapTable('destroy');
        $('#tableMarAdvertList').bootstrapTable({
            url: yy_context+"/screen/list.do", //请求后台的URL(*)
            method: 'post', //请求方式(*)
            // toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true, //是否显示分页(*)
            sortable: false, //是否启用排序
            sortOrder: "asc", //排序方式
            queryParamsType: "limit",
            queryParams: function (params) { //传递参数(*)
               //这里的id值是查询的input框id
                var startTime = $("#startAdvertListDate").val();
                var endTime = $("#endAdvertListDate").val();
                var limit = params.limit;
                var offset = params.offset;
                var name = $("#listName").val();
                var status = $("#status").val();
                var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                    limit: limit, //页面大小
                    offset: offset, //页码
                    name: name,
                    startTime: startTime,
                    endTime: endTime,
                    status: status
                }
                return temp;
            },
            sidePagination: 'server', //client客户端分页,server服务端分页(*)
            pageNumber:1, //初始化加载第一页,默认第一页
            pageSize: 10, //每页的记录行数(*)
            pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
            strictSearch: true,
            showColumns: true, //是否显示所有的列
            showRefresh: true, //是否显示刷新按钮
            minimumCountColumns: 1, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
           // height: 556, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            fixedColumns:true,
            fixedNumber:0,
            uniqueId: "id", //每一行的唯一标识,一般为主键列
            showToggle:true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            columns:
                    [{field: 'name', title: '名称',width:120},
                    {field: 'beingTime', title: '展示开始时间', width:160, //此处为展示时间
                        formatter:function (value, row, index) {
                            if(value == undefined || value == "" || value == null){
                                return "";
                            }
                            var date = new Date(value);
                            return date.Format("yyyy-MM-dd hh:mm");
                        }
                    },
                    {field: 'endTime', title: '展示结束时间', width:160,//此处为展示时间
                        formatter:function (value, row, index) {
                            if(value == undefined || value == "" || value == null){
                                return "";
                            }
                            var date = new Date(value);
                            return date.Format("yyyy-MM-dd hh:mm");   //返回日期插件的日期格式
                        }
                    },
                    {field: 'link', title: '操作', width:180,
                        formatter:function (value, row, index) {
                            var htmlstr = "";
                            if(row.id != 1){
                                htmlstr += '<span id="detailMarActivitySpanId" onclick="detailMarAdvertSpanOnclick('+ row.id + ',' + row.pId + ')">'+'查看'+'</span>'
                                    + '<span id="editlMarActivitySpanId" onclick="editMarAdvertSpanOnclick('+ row.id +')">'+'编辑'+'</span>'
                                    + '<span id="deleteMarActivitySpanId" onclick="deleteMarAdvertSpanOnclick('+ row.id +')">'+'删除'+'</span>';
                            }
                            return htmlstr;
                        }
                    }]
        });

    }

猜你喜欢

转载自blog.csdn.net/qq_38021296/article/details/81740365