#bootstrap.table.js 使用参考#

在展示电商数据列表的时候用到了bootstrap.table.js。整理一些以作日后参考

1：要求从远程获取数据
2：服务端获取的数据 和 table需要是数据格式不符，需要整理

以下是几个关键点：

前端 ：
sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）
后端返回数据 :
  包含参数total 和rows
遇到后端返回数据格式和前端不匹配情况解决方案
 responseHandler: function(res) {
                return {
                    "total": res.data.total,//总页数
                    "rows": res.data.rows   //数据
                 };
            },

-------------------------------------------------------------------------美丽的分割线---------------------------------------------

案例1:

 

 

 

-------------------------------------------------------------------------美丽的分割线---------------------------------------------

案例2

 

 

<script>
<?php  $this->beginBlock("bootstraptable");?>
$(function(){
    var $table = $('#table');
    var url = "<?=Url::toRoute("/seller/member/listuser")?>";
    $table.bootstrapTable({
        url: url,
        classes: 'table table-hover table-bordered table-striped text-nowrap',
        responseHandler:function (res){
            if(res.status == 200){
                var item = res.data.item;
                return {
                    "total": item.total,//总页数
                    "rows":  item.rows   //数据
                };
            }else{
                console.log(res);
            }

        },
        queryParams: function(params){
            return {
                startDate: '2018/09/01',
                endDate: '2019/09/01'
            };
        },
        pageNumber: 1,
        pageSize: 10,
        pageList: '[10, 20, 50, 100]',
        pagination: true,
        paginationLoopz: true,
        search: false,
        idField: 'id',
        showPaginationSwitch: true,
        showColumns: false,
        showExport: false,
        showRefresh: true,
        showToggle: false,
        detailView: false,
        detailFormatter: function(index, row, element){
            return   index ;
        },
        onClickRow:function (row, tr,flied){

        },
        onCheck:function(row){

        },
        columns: [{
            checkbox: true
        },{
            field: 'id',
            title: '用户ID'
        }, {
            field: 'username',
            title: '用户账号',
            class:'username',
        }, {
            field: 'email',
            title: '邮箱'
        }]
    });


    //获取所有被选中的会员，然后赋值给对应的发件人账号
    function checkUser(){
        var usernameList = [];
        $(".listUserTable").find("tr.selected").each(function(){
            var username = $(this).find("td.username").text();
            usernameList.push(username);
        });
        return usernameList ;
    }
    function  handelUser(){
        var list = checkUser();
        var list_str = list.join(",");
        $("#tousername").val(list_str);
    }
    $("#selectuserbtn").click(function(){
        handelUser();
        $('#userList').modal('hide');
    });

// 本地筛选
    $('#localFilter li a').click(function(e){
        e.preventDefault();
        var filter = $(this).data('filter');
        $table.bootstrapTable('resetSearch', filter);
    });
// 异步筛选
    $('#Filter').submit(function(e){
        e.preventDefault();
        var filter = $('input[name=filter]').val();
        $table.bootstrapTable('refresh',{
            query: {
                startDate: '2001/09/01',
                endDate: '2008/09/01',
                filter: filter
            }
        });
    });
});



<?php $this ->endBlock();?>

</script>

 

 

服务端返回数据：