美文网首页
小记 | 引用jquery插入DataTable的注意事项

小记 | 引用jquery插入DataTable的注意事项

作者: orwellr | 来源:发表于2020-02-12 18:04 被阅读0次

    .DataTable()不存在?

    重点关注引用的js文件,① jquery.js要在jquery.datatable.js之前引用;② jquery.js要在echarts.js之前引用;③ 不要重复引用jquery.js

    如何去掉搜索框和每页显示多少条数据?

    $(function(){

        $('#dyntable2').dataTable({

            searching : false, //去掉搜索框方法一:百度上的方法,但是我用这没管用

            sDom : '"top"i',  //去掉搜索框方法二:这种方法可以,动态获取数据时会引起错误

            bFilter: false,    //去掉搜索框方法三:这种方法可以

            bLengthChange: false,  //去掉每页显示多少条数据方法

        });

    });

    button插件导出Excel/TXT/PDF等

    dom: 'lBrtip',                        # 定义按钮位置

    buttons: [

            {

                extend: 'excel',//使用 excel扩展

                text: '导出本页',// 显示文字

                exportOptions: {

                    //自定义导出选项

                    //如:可自定义导出哪些列,哪些行

                    //TODO...

                }

            }

        ]

    更多.DataTable()的自定义配置

    _tableid.dataTable({

            "initComplete": function (oSettings, json) {//初始化完成调用回调函数

                if (_callback)

                    return _callback(oSettings, json);

            },

            "processing": _processing == undefined ? true : _processing, 

            "destroy": _destroy == undefined ? true : _destroy,      //是否重新加载table

            "deferRender": _deferRender == undefined ? true : _deferRender,

            "filter": false,        //搜索框

            "info": false,          //底部文字

            "serverSide": false,      //后台处理分页则为true 

            "paging": true,                    //分页

            "lengthChange": false,  //选择每页显示多少条数据,下拉选项       

            "paginationType": "full_numbers",      //详细分页组,可以支持直接跳转到某页 

            "lengthMenu": [10],    //选择每页显示多少条数据  woshihuoleifeng:)

            "ajax": {

                "type": _ajaxType,

                "url": _ajaxUrl,

                "contentType": 'application/json; charset=utf-8',

                'data': function (data) {

                    if (_formId) {

                        $.each(_formId.serializeArray(), function (i, o) {

                            data[o.name] = o.value;

                        });

                        if (_otherParams.length > 0) {

                            for (var i = 0; i < _otherParams.length; i++) {

                                data[_otherParams[i].columnName] = _otherParams[i].columnValue;

                            }

                        }

                        return data = JSON.stringify(data);

                    }

                    return data = JSON.stringify(data);

                }

            },

            "columns":

            _columns

            ,

            "order": _sortType == undefined ? [0, "asc"] : _sortType,

            "scrollX": _fixedoption == undefined ? false : _fixedoption.scrollX == undefined ? false : _fixedoption.scrollX,

            'sScrollXInner': _fixedoption == undefined ? '100%' : _fixedoption.sScrollXInner == undefined ? '100%' : _fixedoption.sScrollXInner,

            "fixedColumns": _fixedoption == undefined ? {} : _fixedoption.fixedColumns == undefined ? {} : _fixedoption.fixedColumns,

            "columnDefs": _columnDefs == undefined ? "" : _columnDefs,

            "createdRow": _createdRow == undefined ? "" : _createdRow,

            "language": {

                "processing": '<div class="panel-overlay-content unselectable"><span class="panel-overlay-icon text-dark"><i class="fa fa-spinner fa-2x fa-spin"></i></span><h4 class="panel-overlay-title">数据加载中...</h4></div>',

                "lengthMenu": "显示 _MENU_ 项结果",

                "zeroRecords": "没有匹配结果",

                "info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",

                "infoEmpty": "显示第 0 至 0 项结果,共 0 项",

                "infoFiltered": "(由 _MAX_ 项结果过滤)",

                "infoPostFix": "",

                "search": "搜索:",

                "searchPlaceholder": "搜索...",

                "url": "",

                "emptyTable": "暂无数据",

                "loadingRecords": "载入中...",

                "infoThousands": ",",

                "paginate": {

                    "first": "首页",

                    "previous": "上页",

                    "next": "下页",

                    "last": "末页"

                },

                "aria": {

                    paginate: {

                        first: '首页',

                        previous: '上页',

                        next: '下页',

                        last: '末页'

                    },

                    "sortAscending": ": 以升序排列此列",

                    "sortDescending": ": 以降序排列此列"

                },

                "decimal": "-",

                "thousands": ","

            }

    相关文章

      网友评论

          本文标题:小记 | 引用jquery插入DataTable的注意事项

          本文链接:https://www.haomeiwen.com/subject/ffycfhtx.html