`

jQuery DataTables插件 从服务器端获取数据的方法

阅读更多

sAjaxSource参数,值是url。table会发送ajax请求,从服务器端获取数据。服务器端返回的数据应该是一个可以被转换成JSON对象的JSON字符串。这个字符串必须严格符合JSON格式的要求。否则会出错。该数据对象该对象的key应该是“aaData”,例如:

{
    "aaData":
        {
            "columnA":"valueA",
            "columnB":"valueB",
            ... 
        }
}

 

bServerSide参数,设置成true,表示使用服务器端处理数据。当排序时,会直接到后台查询数据,直接显示,不会在前端进行排序操作。

 

fnServerData参数,用来自定义函数,代替DataTables插件默认的从服务器端查询数据的函数。默认的函数如下:

/**
*  @param {string} sSource HTTP source to obtain the data from (sAjaxSource)
*  @param {array} aoData A key/value pair object containing the data to send
*    to the server
*  @param {function} fnCallback to be called on completion of the data get
*    process that will draw the data on the page.
*  @param {object} oSettings DataTables settings object
*/
"fnServerData": function ( sUrl, aoData, fnCallback, oSettings ) {
    oSettings.jqXHR = $.ajax( {
	"url":  sUrl,
	"data": aoData,
	"success": function (json) {
		if ( json.sError ) {
			oSettings.oApi._fnLog( oSettings, 0, json.sError );
		}
		$(oSettings.oInstance).trigger('xhr', [oSettings, json]);
			fnCallback( json );
		},
	"dataType": "json",
	"cache": false,
	"type": oSettings.sServerMethod,
	"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." );
		}
	}
    });
},

 我们可以用这个参数来自定义ajax请求,也可以对获取到的数据进行处理等操作。例如:

服务器端之返回表格的数据对象,没有用“aaData”作为数据的key,我们就可以在我们定义的回调函数里面,给数据加上“aaData” key。

 

fnServerParams参数,用来发送额外的数据给服务器。例如:

$('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "fnServerParams": function ( aoData ) {
      aoData.push( { "name": "more_data", "value": "my_value" } );
    }
});

 

分享到:
评论

相关推荐

    Datatables jquery表格插件

    此外,它还支持服务器端处理,这意味着数据的获取和更新可以在服务器端进行,降低了前端的负担。 在主题和样式上,Datatables可以轻松融入各种网页设计。它内置了多种预设主题,如Bootstrap、Foundation等,也可以...

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    2. ajax加载数据:涉及通过ajax技术从服务器端动态获取数据,并在网页上实时更新表格内容。 3. 增删改查功能:通常指的是在数据库管理系统中对数据进行增(创建)、删(删除)、改(更新)、查(查询)的基本操作。...

    jquery datatables 所需文件 官方下载的

    这只是一个基本的初始化,实际应用中你可能需要配置更多的参数,如排序列、服务器端处理、自定义列等,以满足特定项目需求。 总之,`jQuery DataTables` 是一个强大的数据展示工具,通过其丰富的功能和易于扩展的...

    DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)

    `Mvc.JQuery.Datatables`是一个非常实用的插件,它允许开发者轻松地将流行的JQuery Datatables库与ASP.NET MVC框架集成,从而实现高效、动态和交互式的表格数据展示。这个插件极大地简化了在.NET环境中使用...

    jquery datatables 插件 后台代码

    综上所述,使用jQuery DataTables插件需要在后台设计一个符合规范的数据接口,并处理各种查询条件、排序和分页请求。在实现过程中,安全性和性能优化是不可忽视的关键因素。通过合理的数据处理和传输,我们可以构建...

    JQuery DataTables示例,包含分页、拖拽、导出

    服务器端分页在每次改变页码或搜索条件时向服务器发送请求,获取当前页的数据;客户端分页则将所有数据一次性加载到客户端,然后进行本地处理。这个示例中提到了前后端分页,这意味着项目同时支持这两种方式,可以...

    jquery 分页插件 dataTables

    dataTables插件充分利用了jQuery的简洁和高效,使得在网页上实现复杂的表格操作变得轻而易举。 ### 数据表格核心特性 1. **数据排序**:dataTables支持多列排序,用户只需点击表头即可按指定列进行升序或降序排序...

    DataTables - jQuery表格插件

    - **数据源**:DataTables支持从各种数据源获取数据,包括DOM、CSV、JSON、XML等。 - **国际化**:提供多语言支持,满足全球化需求。 - **自定义扩展**:允许开发者通过API和插件系统进行功能扩展。 2. 使用...

    jquery dataTables组件

    2. **服务器处理**:通常情况下,我们不会直接从客户端读取TXT文件,而是通过服务器端脚本(如PHP、Node.js等)读取并处理文件,然后返回JSON数据。 3. **Ajax数据源**:使用DataTables的`ajax`选项设置数据来源,...

    jquery.dataTables包.rar

    《jQuery DataTables插件详解与应用》 jQuery DataTables 是一款功能强大的JavaScript表格插件,它基于jQuery库,能够将HTML表格转化为具有高级特性的数据展示工具,如排序、搜索、分页等。"jquery.dataTables包....

    jQuery Datatables.zip

    这个例子展示了如何配置一个从服务器端获取数据的Datatable,以及定义了显示的列。 总之,jQuery DataTables是Web开发中处理表格数据的强大工具,其丰富的功能和灵活的配置使其在各种项目中都能发挥重要作用。无论...

    jquery DataTables-1.9.4

    3. **服务器端处理**:对于大量数据,DataTables支持服务器端处理模式,只加载当前页面所需的数据,减轻了前端的负担,提高了页面加载速度和性能。 4. **自定义列和数据**:开发者可以自定义每列的显示内容和样式,...

    jQuery DataTables插件自定义Ajax分页实例解析

    后端分页通常是在服务器端处理分页逻辑,而前端分页则是在客户端处理,前端需要一次性获取所有数据然后自行实现分页逻辑。由于后端分页接口限制,前端无法一次性获取所有数据,因此无法直接实现前端分页。在这种情况...

    codeigniter-datatables, PHP sql server服务器端的jQuery数据表.zip

    codeigniter-datatables, PHP sql server服务器端的jQuery数据表 datatablesPHP sql server服务器端的jQuery数据表这里代码被设计用于在使用Codeigniter时,用于流行的jQuery datatable插件的服务器端部分。...

    jQuery表格插件DataTables

    - **数据源支持**:DataTables支持多种数据源,包括DOM(直接从HTML表格获取数据)、Ajax(异步加载数据)、服务器端处理(仅发送请求参数,服务器返回处理后的数据)以及JSON、XML等多种数据格式。 - **排序功能**...

    jquery-dataTables简单实例

    DataTables支持多种数据源,包括HTML表格数据、服务器端数据(Ajax)和JSON对象。在本例中,假设数据已内置于HTML表格中,无需额外配置。 3. **功能定制** DataTables提供很多可选参数以定制其行为。例如,可以...

    jquery datatables实例

    这里,`processing`设置为`true`表示在数据加载期间显示加载指示器,`serverSide`设置为`true`表明数据将在服务器端处理。`ajax`属性指定了服务器脚本的URL,这个脚本将负责获取并返回数据。 服务器端,我们通常...

    Datatables使用Ajax方式读取数据

    在本教程中,我们将探讨如何利用Datatables与Ajax结合,动态地从服务器获取并展示数据。 首先,让我们了解基础概念。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。...

    jquerydatatable服务器端分页实现方法[借鉴].pdf

    - DataTables插件会自动解析这些数据,更新表格内容,并根据返回的总记录数更新分页信息。 为了优化和避免使用Cookie存储数据,可以设置`bStateSave`选项为`false`。这将禁用DataTable插件的状态保存功能,防止在...

    datatables刷新插件fnReloadAjax

    `DataTables`本身支持Ajax数据源,允许从服务器端动态获取数据并显示在表格中。然而,当你需要在用户操作后(如筛选、排序或过滤)即时更新表格数据时,`fnReloadAjax`插件就派上用场了。这个插件能够便捷地触发表格...

Global site tag (gtag.js) - Google Analytics