dataTables的使用: button 显示隐藏和导出和每列添加检索功能

 $(function(){
		

 - 每列下面添加检索框

            $('#dataTable tfoot th').each( function () {
                var title = $('#dataTable thead th').eq( $(this).index() ).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );
            var table = $('#dataTable').DataTable({
                lengthChange: true,
                serverSide: true,
                // autoWidth : false, //是否自适应宽度
                // scrollCollapse : false, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
                scrollX: true,
                ajax: {
                    url: '',
                    data: function (d) {
                        //运营
                        d.channel 				= $('#searchChannel').val();
                        d.type  				= $('#type').val();
                    }
                },
                columns: columns,
                dom:  '<lfB<t>ip>',
                // "stateSave": true,
                buttons: [
                    {
                        extend: 'colvis',
                        text: '显示/隐藏',
                        className:'btn btn-success',
                    },
                    {
                        extend: 'excel',
                        text: '导出xlsx',
                        className:'btn btn-success',
                        exportOptions: {
                            columns: ':visible',
                        }
                    },
                ],

                language : {
                    'paginate': {
                        'first':      '第一页',
                        'last':       '最后一页',
                        'next':       '下一页',
                        'previous':   '上一页'
                    },
                    'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',
                    'infoEmpty': '没有数据',
                    'infoFiltered': '(过滤总条数 _MAX_ 条)'
                },
            });
            

 - 此处代码是为了解决导出只能导出本页面数据问题.添加页码数,刷新页面,使用button导出当前页面数据.说白了就是让你想要的数据展示在一个页面上面,然后才能导出来.因为button execl 只能导出当前页.

            $('select[name="dataTable_length"]').append('' +
                '<option value="1000">1000</option>' +
                '<option value="2000">2000</option>'+
                '<option value="5000">5000</option>'
            );
            

 - 因页面太宽,列太多,使用列显示隐藏时,表头和数据宽度错乱,特此添加了刷新功能.

            $(document).on('click', '.dt-button-background', function () {
                dataTable.draw();
            });
            table.on('draw.dt', function () {
                loadShow(0);
                $('#searchProvider').select2();
            });

 - 添加检索框enter 事件请求

            // Apply the search
            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );
 - 添加检索框在头部
            $('#dataTable tfoot tr').appendTo('#dataTable thead');



            //3-电销给商机添加备注
            $(document).on('click','.dx_remarks',function(){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
                    }
                });
                var id  = $(this).attr('data-id');
                var status = 'show';
                $.ajax({
                    url: "",
                    data: {'id':id,'status':status},
                    type: "post",
                    dataType:"json",
                    success: function (data) {
                        layer.prompt({
                            formType: 2,
                            value: data.data,
                            title: '请输入备注信息',
                            area: ['800px', '350px'] //自定义文本域宽高
                        }, function(value, index, elem){
                            if(value != ''){
                                $.ajax({
                                    url:"",
                                    data:{'id':id,'content':value},
                                    type:"post",
                                    dataType:"json",
                                    success:function(data){
                                        if(data.data != ''){
                                            $(this).val(data.data);
                                        }
                                        layer.msg(data.msg);
                                    }
                                });
                            }
                            layer.close(index);
                        });
                    },
                    error: function (msg) {
                        layer.msg('可能后台出错了');
                    },
                });
            });
            //1-修改线索radio状态
            $('body').on('click', '.type_status_select', function () {
                $(this).attr('checked',true);
                $(this).siblings().attr('checked',false);
            });
        });

 - [ 需要加载的js] 

    <script src="https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>

 - [html ] 

<div class="box">
        <div class="box-body table-responsive">
            <table id="dataTable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                        <th>渠道</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                <tr>
                    <th>序号</th>
                        <th>渠道</th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>