dataTable

<script type="text/javascript">
    var myTable;
    $(function () {
        myTable =  initDataTable();
    });
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
   //搜索
    function searchInfo(type){
        var param = {
            "_token" : '{{ csrf_token() }}',
            "mobile":$('#mobile').val(),
            "search_status":$('#search_status').val(),
        };
        myTable.settings()[0].ajax.data = param;
        myTable.ajax.reload();
    }
    function initDataTable(){
        // var city_id =$('#city_id').val();
        var table ;
        table  =  $("#mytable").DataTable({
            "oLanguage":{"sUrl":"{{asset('plugins/datatables/jquery.dataTable.cn.txt')}}"},
            "responsive":true,
            "serverSide": true, //true 服务器分页 false 客户端分页
            'stateSave':true,  //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
            "retrieve": true,
            "processing": true,
            "autoWidth": false,

           "dom":'lBrtip', //显示 copy excel ptint CSV FDP

           "bFilter": false,// 或 searching : false, // 关闭搜索框

            bLengthChange: false, //关闭显示框

            "scrollX": true, //水平滚动条. 使用水平滚动条时 显示的字段和显示的数据条数必须一致

            //"bPaginate" : true,// 分页按钮

            //"bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示

            //"iDisplayLength" : 10,// 每页显示行数

            //"sScrollY": 450, //DataTables的高 // "sScrollX": 820, //DataTables的宽

 

            "order": [[ 0, "desc" ]], //默认倒序
            "ajax": {
                "url":"{{URL::action('User\InvoiceApplicationsController@getListData')}}",
                "type":"POST",
                "dataType":"json",
                "data":{'_token':'{{ csrf_token()}}'},
            },
            "columns": [
                { "data": "id" }, //显示字段
                { "data": "name" },
            ],

           // data 当前单元格字段   type 当前字段类型   row 所有字段

          // meta 为一个子对象,包含3个属性   row: 当前行的索引 col: 当前列的索引 settings: 当前DataTables控件的setttings对象

          //可以用作传输的所有有字段 列:meta.row
            "columnDefs": [

          //关闭排序

           {

           'targets' : [1,2], //关闭某一行排序

            'orderable' : false

           },

                {
                    "render" : function(data, type, row, meta){
                        var str ="";
                        if ($.trim(row.get_user)){
                            var str=row.get_user.nick_name;
                        }
                        return str;
                    },

                    "width" :100, //单个单元格宽度

                    "targets" :0,
                },
                {
                    "render" : function(data, type, row){
                        var str ="";
                        if ($.trim(row.get_user)){
                            var str=row.get_user.mobile;
                        }
                        return str;
                    },
                    "targets" :1,
                },
            ],

        //导出

       "dom": "<'row'<'col-sm-6'Bl><'col-sm-6'f>>rt<'row'<'col-sm-6'i><'col-sm-6'p>>", //导出位置
       "buttons": [ {
            extend: 'excelHtml5', //导出格式
            text: '导出excel',//定义导出excel按钮的文字
            className: 'btn btn-danger',
            filename:'耗材管理', //导出文件名称
            exportOptions: {
            columns: [ 0, 1, 2] //选择需要导出的行数
        }
     } ]

        });
        return table;
    }

   // 可以解析meta   data 数据为对象 
    function invoiceSave(i) {
        var index  = Number(i);
        var data = myTable.rows(index).data()[0];
        $('#id').val(data.id);
    }
//时间插件 得引入文件 不然不能用
    laydate.render({
        elem: '#time_k',
        type: 'date',
        theme: '#CBB3B4 ',
    });
    laydate.render({
        elem: '#time_j',
        type: 'date',
        theme: '#CBB3B4 ',
    });
</script>

//数据展示
<div class="box-body">
    <table id="mytable" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>客户姓名</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
</div><!-- /.box-body -->

本文原创,未经授权不得转载

dataTable 参数说明   https://www.cnblogs.com/hyywaq/p/5919412.html