管理后台非常好用的multiTable

<table class="table table-hover table-bordered autotable"></table>

var table = document.querySelector('.autotable');
var cData=[{
            key: 'snumber',
            width: '100px',
            text: '系统单号',
            template:function(action, rowObject) {
                return '<div class="leftspace rowid" preorder_number="'+rowObject.pnumber+'" parent_id="'+rowObject.pid+'" sale_id="'+rowObject.id+'" flow_id="'+rowObject.flow_id+'" reconciliation_status="'+rowObject.reconciliation_status+'">'+rowObject.snumber+'</div>'
            }
        },{
            key: 'pnumber',
            width: '100px',
            text: '母订单号',
            template:function(action, rowObject) {
                return '<div>'+rowObject.pnumber+'</div>'
            }
        },{
            key: 'deliverytime',
            width: '100px',
            text: '发货日期',
            template:function(action, rowObject) {
                return '<div>'+rowObject.deliverytime+'</div>'
            }
        },{
            key: 'reconciliation_status',
            width: '100px',
            text: '对账状态',
            template: function(action,rowObject){
                return '<div>'+rowObject.reconciliation_value+'</div>'
                
            }
        },{
            key: 'ouser_name',
            width: '100px',
            text: '客户名称',
            template: function(action,rowObject){
                return '<div>'+rowObject.ouser_name+'</div>'
            }
        },{
            key: 'taobao_name',
            width: '100px',
            text: '店铺',
            template: function(action,rowObject){
                return '<div>'+rowObject.taobao_name+'</div>'
            }
        },{
            key: 'user_name',
            width: '100px',
            text: '销售人员',
            template: function(action,rowObject){
                    return '<div>'+rowObject.user_name+'</div>'
            }
        },{
            key: 'theory_amount',
            width: '100px',
            text: '订单金额',
            template: function(action,rowObject){
                return '<div>'+rowObject.theory_amount+'</div>'
            }
        },{
            key: 'remark',
            width: '100px',
            text: '备注',
            template: function(action,rowObject){
                return '<div title='+rowObject.remark+'>'+rowObject.remark+'</div>'
            }
        }
    ];
table.GM({
        gridManagerName: 'test'
    ,disableCache:false
    ,supportAjaxPage:true
    ,supportSorting: true
    ,isCombSorting: true
    ,supportDrag:true
    ,supportAutoOrder:true
    ,supportSorting:true
    ,supportCheckbox:true
    // ,ajax_url: '/get_purchase_order_list.php'
    ,ajax_url: '/statement_delivered_ajax.php'
    ,ajax_type: 'POST'
    ,query: {}
    ,pageSize:20
    ,columnData:cData
    ,ajax_success: function () {
        
    }
});

// 搜索
$(".search-btn").on("click",function(){
    var start = $('input[name=start]').val() || '';//开始时间
    var end   = $('input[name=end]').val() ||  '';//结束时间
    var preorder_number = $('input[name=preorder_number]').val() ||  '';//母订单编号
    var snumber = $('input[name=snumber]').val() ||  '';//关联订单编号
    var reconciliation_status = $('select[name=reconciliation_status] option:selected').val() || '';//对账状态
    var name = $('input[name=name]').attr('user_id') || '';//客户名称
    var receiver_name = $('input[name=receiver_name]').val(); // 收件人
    var user_id = $('input[name=user_id]').attr('id'); // 客服

    var shop_id = shopheckbox();

    var _query = {
        start                   : $.trim(start),
        end                     : $.trim(end),
        preorder_number         : $.trim(preorder_number),
        snumber                 : $.trim(snumber),
        reconciliation_status   : $.trim(reconciliation_status),
        name                    : $.trim(name),
        receiver_name           : $.trim(receiver_name),
        shop_id                 : $.trim(shop_id),
        user_id                 : $.trim(user_id),
    }
    table.GM('setQuery', _query).GM('refreshGrid', function () {
        console.log('搜索成功...');
    });
});

数据格式{data:[{},{}]}
表格插件见 https://download.csdn.net/download/qq_34664239/12404084