`

jQuery DataTable 使用

阅读更多

### ‘发克‘

## 后台参数说明:

* @param {object} oSettings dataTables settings object
*  @param {object} json json data return from the server.
*  @param {string} json.sEcho Tracking flag for DataTables to match requests
*  @param {int} json.iTotalRecords Number of records in the data set, not accounting for filtering
*  @param {int} json.iTotalDisplayRecords Number of records in the data set, accounting for filtering
*  @param {array} json.aaData The data to display on this page
*  @param {string} [json.sColumns] Column ordering (sName, comma separated)

sEcho:                 # 从第几条数据开始 
iTotalDisplayRecords:  # 前台总共有多少条数据能展现 
iTotalRecords:         # 数据库中,在没有过滤的情况下有多少条数据
aaData:                # 名字可以修改,同时修改 sAjaxDataProp这个参数

 

 

initDataTable: function (_table, _options, _aoColumns) {
        if (!$().dataTable) {
            return;
        }
        var tableInitialized = false;
        var ajaxParams = [];
        var tableOptions = $.extend({
            oLanguage: {
                sLengthMenu: "每页显示 _MENU_ 条记录",
                sZeroRecords: "对不起,查询不到任何相关数据",
                sInfo: "显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                sInfoEmtpy: "找不到相关数据",
                sInfoFiltered: '', //"共有 _MAX_ 条记录"
                sProcessing: "正在加载中...",
                sSearch: "搜索",
                sInfoEmpty: "显示 0 到 0 条,共 0 条记录",
                oPaginate: {sPrevious: "上一页 ", sNext: "下一页"}
            },
            sDom: "<t<r><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
            sInfoEmpty: "没有找到数据~",
            sAjaxRequestGeneralError: "获取数据失败!",
            sEmptyTable: "没有数据",
            bAutoWidth: false,
            sScrollX: 'disabled',
            sScrollY: 'disabled',
            iDisplayLength: 25,
            bPaginate: true,
            bInfo: true,
            bFilter: false,
            bSort: false,
            bProcessing: true,
            sServerMethod: 'GET',
            bServerSide: true,
            sAjaxSource: '',
            aoColumns: _aoColumns || [],
            fnServerParams: function (aoData) {
                $.each(ajaxParams, function (i, param) {
                    aoData.push({name: param[0], value: param[1]});
                })
            },
            fnServerData: function (sUrl, aoData, fnCallback, oSettings) {
                oSettings.jqXHR = $.ajax({
                    url: sUrl,
                    data: aoData,
                    dataType: "json",
                    cache: false,
                    type: oSettings.sServerMethod,
                    success: function (json) {
                        if (json.sError) {
                            oSettings.oApi._fnLog(oSettings, 0, json.sError);
                        }
                        if (json.data) {
                            var data = json.data
                        } else {
                            var data = json
                        }
                        $(oSettings.oInstance).trigger('xhr', [oSettings, data]);
                        fnCallback(data);
                    },
                    error: function (xhr, error, thrown) {
                        if (error == "parsererror") {
                            oSettings.oApi._fnLog(oSettings, 0, "DataTables warning: JSON data from " +
                                "server could not be parsed. This is caused by a JSON formatting error.");
                        }
                    }
                });
            },
            updateTableParams: function (ajaxParams) {
                console.log('没有更新!');
            }
        }, _options || {});

        var dataTable = _table.dataTable(tableOptions);

        if (_table.data('update-btn')) {
            var $updateBtn = $(_table.data('update-btn'));
            $updateBtn.click(function () {
                console.log('更新');
                tableOptions.updateTableParams(ajaxParams);
                _table.fnDraw();
            });
        }

        return dataTable;
    }

 

function getBaseParams() {
                // 这里获取要传的参数
                return  {<name>: <alue>, ...}
            }

            var aoColumns = [
                {   mData: key, // 字段key
                    fnRender: function (oObj) {
                        return '<div><span>' +
                                '<input type="checkbox" class="checkbox-item" value="' + oObj['aData'][字段key] + '"></span></div>'
                    }
                },
                {mData: 字段key, sWidth: '20%'},
                {mData: 字段key}
                .......
            ];

            var $table = $('#TableListId');
            var baseUrl = $table.data('base-url');

            var updateTableParams = function (ajaxParams) {
                var params = getBaseParams()// 自定义获取想要传的参数方法;
                for (var name in params) {
                    ajaxParams.push([name, params[name]])
                }
            };

            initDataTable($table, {sAjaxSource: baseUrl, updateTableParams: updateTableParams}, aoColumns);

  

 

 

 

 

分享到:
评论

相关推荐

    Jquery DataTable使用经典案例

    在.Net下使用Jquery DataTable,首先需要确保在项目中引入了jQuery库以及DataTable的JavaScript和CSS资源。可以通过NuGet包管理器安装jQuery,然后从CDN或本地资源路径引入DataTable的库文件,例如: ```html ...

    Jquery dataTable中文API中文文档

    此中文文档详细介绍了如何在ASP.NET MVC项目中集成并使用JQuery DataTable。 #### 二、安装与配置 1. **下载地址**: 官方下载地址为[http://www.datatables.net/](http://www.datatables.net/)。 2. **引入CSS样式*...

    Jquery dataTable显示指定列

    在本文中,我们将深入探讨如何使用Jquery dataTable插件来显示指定列,特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库,用于处理HTML表格,提供了排序、过滤、分页等特性,极...

    JQuery DataTable中文文档API.chm

    `JQuery DataTables中文文档API.chm` 提供了详细的中文参考,帮助开发者更好地理解和使用这个库。 **1. 数据源(Data Sources)** `DataTables` 支持多种数据源,包括DOM、JSON、XML、CSV、TSV等。这使得它可以灵活...

    Jquery dataTable后台获取数据示例

    1. **引入依赖**: 首先确保项目中已经包含了jQuery、DataTables以及对应的CSS和JS文件,如果使用Struts2,还需要引入Struts2-jQuery插件。 2. **HTML布局**: 创建一个基本的HTML表格,并为其附加DataTables初始化...

    jquery datatable 单元格合并

    在IT领域,jQuery DataTables是一款广泛使用的数据展示插件,它提供了丰富的功能,如排序、搜索、分页等。在某些场景下,我们可能需要对表格中的单元格进行合并,以便更好地展示数据,例如汇总或者分类。本篇将详细...

    jQuery Datatable 自定义列1

    jQuery Datatable 自定义列1 jQuery Datatable 是一个功能强大的表格工具,提供了许多实用的功能,例如排序、分页、查找等。在本文中,我们将重点讲解如何对 Datatable 中的表格内容进行操作,包括改变样式、增加一...

    jquery datatable api chm 中文

    jquery datatable api chm 中文

    Jquery dataTable完整例子(分页,带文档)

    jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!

    Jquery dataTable完整例子(取数据、分页、样式等)

    在本文中,我们将深入探讨jQuery DataTable插件,它是一个强大的数据展示工具,广泛用于Web开发中的表格操作。标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件...

    jquery datatable serverside page 服务器端分页

    **jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...

    Jquery DataTable基于Twitter Bootstrap的样式

    Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码

    JQuery DataTable 插件 V2.0

    **jQuery DataTables插件V2.0详解** ...然后,选择要操作的表格元素,使用`.DataTable()`方法将其初始化为DataTables对象。 ```html &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt; ...

    jquery datatable 大数据分页面的解决方案

    本文将详细介绍在使用jQuery DataTable处理大数据时,四种不同的数据来源及其对应的分页解决方案。 #### 二、数据来源与分页方案 ##### 1. DOM对象 这种情况下,数据直接来源于HTML文档中的`&lt;table&gt;`元素的`...

    jquery.dataTable.js 使用详解 一、基础配置

    《jQuery.dataTables.js 使用详解——一、基础配置》 在网页开发中,数据展示是一个重要的环节,而jQuery.dataTables.js插件为高效、美观的数据表格呈现提供了强大的解决方案。本篇将深入探讨该插件的基础配置,...

    Structs 2 Action 与 JQuery Datatable 的整合

    2. **JSON数据格式化**:由于JQuery Datatable通常使用JSON数据格式来获取服务器端数据,Action需要将处理后的数据转换为JSON格式,可以通过使用Struts 2的JSON插件或自定义Result类型来实现。 3. **Ajax请求设置**...

    jquery datatable

    在实际应用中,使用jQuery DataTables时,通常会涉及到以下步骤: 1. **引入资源**:在HTML文件中引入jQuery库和DataTables的CSS及JS文件。 2. **初始化表格**:通过JavaScript代码对表格元素进行初始化,设置各种...

    DataTable+Jquery+Bootstrap实现表格增删改查

    DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查

    jquery的DataTable

    DataTable插件是基于jQuery库构建的,因此在使用时需要先引入jQuery。 ### 1. 基本使用 在HTML页面中,首先需要创建一个普通的HTML表格,然后通过JavaScript来初始化DataTable。以下是一个基本的示例: ```html ...

    Jquery Datatable editor 1.5.4破解版本

    Jquery Datatable editor,功能很强大,使用的人可能不多,但真的好用。目前新版(1.5.6)已经是加密版本,没有破解,就退而示其次,使用这个版本。 如果发现有问题,就在dataTables.editor.min.js文件把 var K4O={'...

Global site tag (gtag.js) - Google Analytics