`

DataTables封装的操作

阅读更多
var DatatableHelper = function() {

    var tableOptions; // main options
    var dataTable; // datatable object
    var table; // actual table jquery object
    var tableContainer; // actual table container object
    var tableWrapper; // actual table wrapper jquery object
    var tableInitialized = false;
    var ajaxParams = {}; // set filter mode
    var the;

    var countSelectedRecords = function() {
        var selected = $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size();
        var text = tableOptions.dataTable.language.metronicGroupActions;
        if (selected > 0) {
            $('.table-group-actions > span', tableWrapper).text(text.replace("_TOTAL_", selected));
        } else {
            $('.table-group-actions > span', tableWrapper).text("");
        }
    };

    return {

        //main function to initiate the module
        init: function(options) {

            if (!$().dataTable) {
                return;
            }

            the = this;

            // default settings
            options = $.extend(true, {
                src: "", // actual table  
                filterApplyAction: "filter",
                filterCancelAction: "filter_cancel",
                resetGroupActionInputOnSuccess: true,
                loadingMessage: 'Loading...',
                dataTable: {
                    //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><'table-responsive't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout
                    //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><''t><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout
                    "pageLength": 10, // default records per page
                    "language": {
                        "metronicGroupActions": "_TOTAL_ records selected:  ",
                        "metronicAjaxRequestGeneralError": "Could not complete request. Please check your internet connection",

                        // data tables spesific
                        //"lengthMenu": "<span class='seperator'>|</span>每页 _MENU_ 条记录",
                        "info": "显示 _START_ 到 _END_ 项,共 _TOTAL_ 项",
                        "infoEmpty": "显示0项",
                        "emptyTable": "未有相关数据",
                        "zeroRecords": "对不起,查询不到任何相关数据",
                        "paginate": {
                            "previous": "上一页",
                            "next": "下一页",
                            "last": "最后一页",
                            "first": "第一页",
                            "page": "页",
                            "pageOf": "of"
                        },
                        "sProcessing": "处理中…",
                        "sSearch": "查找:"
                    },
                    "orderCellsTop": true,
                    "columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
                        'orderable': false,
                        'targets': [0]
                    }],

                    //"pagingType": "bootstrap_full_number", // pagination type(bootstrap, bootstrap_full_number or bootstrap_extended)
                    "autoWidth": false, // disable fixed width and enable fluid table
                    "processing": false, // enable/disable display message box on record load
                    "serverSide": true, // enable/disable server side ajax loading

                    "ajax": { // define ajax settings
                        "url": "", // ajax URL
                        "type": "POST", // request type
                        "timeout": 20000,
                        "traditional": false,
                        "data": function(data) { // add request parameters before submit
                            $.each(ajaxParams, function(key, value) {
                                data[key] = value;
                            });
                            App.blockUI({
                                message: tableOptions.loadingMessage,
                                target: tableContainer,
                                overlayColor: 'none',
                                cenrerY: true,
                                boxed: true
                            });
                        },
                        "dataSrc": function(res) { // Manipulate the data returned from the server
                            if (res.customActionMessage) {
                                App.alert({
                                    type: (res.customActionStatus == 'OK' ? 'success' : 'danger'),
                                    icon: (res.customActionStatus == 'OK' ? 'check' : 'warning'),
                                    message: res.customActionMessage,
                                    container: tableWrapper,
                                    place: 'prepend'
                                });
                            }

                            if (res.customActionStatus) {
                                if (tableOptions.resetGroupActionInputOnSuccess) {
                                    $('.table-group-action-input', tableWrapper).val("");
                                }
                            }

                            if ($('.group-checkable', table).size() === 1) {
                                $('.group-checkable', table).attr("checked", false);
                                $.uniform.update($('.group-checkable', table));
                            }

                            if (tableOptions.onSuccess) {
                                tableOptions.onSuccess.call(undefined, the, res);
                            }

                            App.unblockUI(tableContainer);

                            return res.data;
                        },
                        "error": function() { // handle general connection errors
                            if (tableOptions.onError) {
                                tableOptions.onError.call(undefined, the);
                            }

                            App.alert({
                                type: 'danger',
                                icon: 'warning',
                                message: tableOptions.dataTable.language.metronicAjaxRequestGeneralError,
                                container: tableWrapper,
                                place: 'prepend'
                            });

                            App.unblockUI(tableContainer);
                        }
                    },

                    "drawCallback": function(oSettings) { // run some code on table redraw
                        if (tableInitialized === false) { // check if table has been initialized
                            tableInitialized = true; // set table initialized
                            table.show(); // display table
                        }
                        App.initUniform($('input[type="checkbox"]', table)); // reinitialize uniform checkboxes on each table reload
                        countSelectedRecords(); // reset selected records indicator

                        // callback for ajax data load
                        if (tableOptions.onDataLoad) {
                            tableOptions.onDataLoad.call(undefined, the);
                        }
                    }
                }
            }, options);

            tableOptions = options;

            // create table's jquery object
            table = $(options.src);
            tableContainer = table.parents(".table-container");

            // apply the special class that used to restyle the default datatable
            var tmp = $.fn.dataTableExt.oStdClasses;

            $.fn.dataTableExt.oStdClasses.sWrapper = $.fn.dataTableExt.oStdClasses.sWrapper + " dataTables_extended_wrapper";
            $.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xs input-sm input-inline";
            $.fn.dataTableExt.oStdClasses.sLengthSelect = "form-control input-xs input-sm input-inline";

            // initialize a datatable
            dataTable = table.DataTable(options.dataTable);

            // revert back to default
            $.fn.dataTableExt.oStdClasses.sWrapper = tmp.sWrapper;
            $.fn.dataTableExt.oStdClasses.sFilterInput = tmp.sFilterInput;
            $.fn.dataTableExt.oStdClasses.sLengthSelect = tmp.sLengthSelect;

            // get table wrapper
            tableWrapper = table.parents('.dataTables_wrapper');

            // build table group actions panel
            if ($('.table-actions-wrapper', tableContainer).size() === 1) {
                $('.table-group-actions', tableWrapper).html($('.table-actions-wrapper', tableContainer).html()); // place the panel inside the wrapper
                $('.table-actions-wrapper', tableContainer).remove(); // remove the template container
            }
            // handle group checkboxes check/uncheck
            $('.group-checkable', table).change(function() {
                var set = table.find('tbody > tr > td:nth-child(1) input[type="checkbox"]');
                var checked = $(this).prop("checked");
                $(set).each(function() {
                    $(this).prop("checked", checked);
                });
                $.uniform.update(set);
                countSelectedRecords();
            });

            // handle row's checkbox click
            table.on('change', 'tbody > tr > td:nth-child(1) input[type="checkbox"]', function() {
                countSelectedRecords();
            });

            // handle filter submit button click
            table.on('click', '.filter-submit', function(e) {
                e.preventDefault();
                the.submitFilter();
            });

            // handle filter cancel button click
            table.on('click', '.filter-cancel', function(e) {
                e.preventDefault();
                the.resetFilter();
            });
        },

        submitFilter: function() {
            the.setAjaxParam("action", tableOptions.filterApplyAction);

            // get all typeable inputs
            $('textarea.form-filter, select.form-filter, input.form-filter:not([type="radio"],[type="checkbox"])', table).each(function() {
                the.setAjaxParam($(this).attr("name"), $(this).val());
            });

            // get all checkboxes
            $('input.form-filter[type="checkbox"]:checked', table).each(function() {
                the.addAjaxParam($(this).attr("name"), $(this).val());
            });

            // get all radio buttons
            $('input.form-filter[type="radio"]:checked', table).each(function() {
                the.setAjaxParam($(this).attr("name"), $(this).val());
            });

            dataTable.ajax.reload();
        },

        resetFilter: function() {
            $('textarea.form-filter, select.form-filter, input.form-filter', table).each(function() {
                $(this).val("");
            });
            $('input.form-filter[type="checkbox"]', table).each(function() {
                $(this).attr("checked", false);
            });
            the.clearAjaxParams();
            the.addAjaxParam("action", tableOptions.filterCancelAction);
            dataTable.ajax.reload();
        },

        getSelectedRowsCount: function() {
            return $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size();
        },

        getSelectedRows: function() {
            var rows = [];
            $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).each(function() {
                rows.push($(this).val());
            });

            return rows;
        },

        setAjaxParam: function(name, value) {
            ajaxParams[name] = value;
        },

        addAjaxParam: function(name, value) {
            if (!ajaxParams[name]) {
                ajaxParams[name] = [];
            }

            skip = false;
            for (var i = 0; i < (ajaxParams[name]).length; i++) { // check for duplicates
                if (ajaxParams[name][i] === value) {
                    skip = true;
                }
            }

            if (skip === false) {
                ajaxParams[name].push(value);
            }
        },

        clearAjaxParams: function(name, value) {
            ajaxParams = {};
        },

        getDataTable: function() {
            return dataTable;
        },

        getTableWrapper: function() {
            return tableWrapper;
        },

        gettableContainer: function() {
            return tableContainer;
        },

        getTable: function() {
            return table;
        }

    };

};
分享到:
评论

相关推荐

    DataTables自行封装请求参数和返回数据的零耦合服务端分页示例(PHP&JAVA)

    使用方法: ... ... ...也可使用Eclipse直接导入此项目文件...分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示

    DataTables自行封装请求参数和返回数据的零耦合服务端分页示例

    使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能...分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css)

    dataTables java后台解析http请求参数demo

    当用户在前端进行分页、排序或过滤操作时,DataTable会自动发起Ajax请求,将这些操作的参数以JSON格式封装在HTTP请求体中发送到服务器。这些参数通常包括draw(请求序列号)、start(数据起始位置)、length(每页...

    Laravel开发-laravel-datatables-scout

    Laravel提供了对DataTables的封装,使得与数据库交互变得更加简单,减少了开发者的工作量。 Scout是Laravel的一个搜索组件,它允许开发者通过Eloquent ORM(对象关系映射)实现全文搜索引擎。Scout支持多种后端服务...

    SSM+Mybatis+datatables+H-ui后台管理系统

    在后台管理系统中,datatables通常与后端API配合,用于展示和操作大量数据。 **H-ui**:H-ui是一款简洁、易用的前端UI框架,主要用于快速构建管理界面。它提供了多种预定义的CSS样式和组件,如按钮、表单、模态框等...

    django-rest-framework-datatables:Django REST框架与Datatables之间的无缝集成

    - **视图**:创建一个DRF的ViewSet或APIView,处理GET请求以获取数据,POST请求以处理表格操作(如排序和搜索)。 - **前端集成**:在HTML页面中引入Datatables的CSS和JS文件,然后设置Datatables的Ajax源为你刚刚...

    laravel_datatables-源码.rar

    Laravel DataTables是一款基于jQuery DataTables插件的Laravel包,它为Laravel框架提供了强大的数据表格处理能力,使得在Web应用中展示和操作大量数据变得轻松易行。本文将深入探讨Laravel DataTables的源码,解析其...

    Python库 | collective.js.datatables-4.0.0.tar.gz

    DataTables库是用JavaScript编写的,用于前端Web开发,而collective.js.datatables可能是Python中的一层封装,使得后端开发者能够更容易地在他们的Python应用中使用DataTables的功能。 "开发语言"标签进一步确认了...

    Tim_Lee_ZhongShan-Datatables-Demo-master.rar

    在ASP.NET MVC中,控制器负责处理用户的请求,视图负责呈现数据,而模型则封装了应用程序的核心业务逻辑和数据。 接下来是Bootstrap,这是一个流行的前端开发框架,它提供了丰富的预定义样式、组件和JavaScript插件...

    jquery datatable后台封装数据示例代码

    总结起来,这个示例展示了如何在Java后端使用jQuery DataTables插件进行数据操作。通过创建适配DataTables格式的响应对象,解析前端请求参数,以及执行对应的数据库查询,实现了后台数据的封装和返回,从而支持前端...

    基于Bootstrap+php+jquery酒店预订系统后台管理系统

    封装PDO数据库操作类,实现增删改查等等常见功能,调用简单 随机酒店推荐策略 多条件模糊搜索酒店算法 jquery表格插件Datatables的使用大大丰富了数据的展现方式,更具交互性。具有自动分页、模糊搜索等功能 封装了...

    php酒店预订系统后台管理系统.zip

    封装PDO数据库操作类,实现增删改查等等常见功能,调用简单 随机酒店推荐策略 多条件模糊搜索酒店算法 jquery表格插件Datatables的使用大大丰富了数据的展现方式,更具交互性。具有自动分页、模糊搜索等功能 封装了...

    php酒店预订系统后台管理系统

    封装PDO数据库操作类,实现增删改查等等常见功能,调用简单 随机酒店推荐策略 多条件模糊搜索酒店算法 jquery表格插件Datatables的使用大大丰富了数据的展现方式,更具交互性。具有自动分页、模糊搜索等功能 封装了...

    JQuery操作dhtml演示源码

    jQuery 对DOM操作进行了封装,使得添加、删除和修改元素变得简单。例如,`$(selector).append(content)` 可在选中的元素后添加`content`,`$(selector).remove()` 删除匹配的元素,而 `$(selector).html(newHtml)` ...

    SpringMVC+Mybatis 框架,非Mven版本,自带基本功能和教复杂的表单样例

    1、轻量级,dao层做了封装,将常见的操作封装在一个对象内 不需要写mapper接口,只要配置mapper.xml即可。 2、封装了可配置的Quartz定时器;分两个版本:一个基于xml的配置版,一个是读取SQL 3、轻量级缓存 4、页面...

    基于PHP的酒店项目后台管理系统

    封装PDO数据库操作类,实现增删改查等等常见功能,调用简单。 随机酒店推荐策略。 多条件模糊搜索酒店算法。 jquery表格插件Datatables的使用大大丰富了数据的展现方式,更具交互性。具有自动分页、模糊搜索等功能...

    【毕业设计】基于PHP的酒店预订系统后台管理系统【后端源码+sql】.zip

    封装PDO数据库操作类,实现增删改查等等常见功能,调用简单 随机酒店推荐策略 多条件模糊搜索酒店算法 jquery表格插件Datatables的使用大大丰富了数据的展现方式,更具交互性。具有自动分页、模糊搜索等功能 封装了...

    datatable使用方法

    `DataTable` 是一个广泛用于数据展示的前端组件,尤其在Web应用中,它提供了一种高效、可定制的方式来展示和操作表格数据。本教程将深入探讨`DataTable`的使用方法,以`SpringBoot`和`DataTables Grid`为例,帮助你...

    jquery 树、分页等各类插件

    jQuery的核心特性包括选择器(用于高效地查找DOM元素)、链式调用(使得多个操作可以连续执行)和封装浏览器差异,使得开发者可以编写更简洁、跨浏览器兼容的代码。 接下来是`js.tree.js`,这通常是一个jQuery树形...

    vuedatatablesVueJS2数据表格

    7. **单文件组件(Single File Component,SFC)**:Vue.js 2.0引入的SFC模式,将模板、脚本和样式都封装在一个.vue文件中,提高了代码的组织性和可读性。在`vuedatatables`项目中,每个组件可能都是一个SFC。 8. *...

Global site tag (gtag.js) - Google Analytics