javascript

位置:IT落伍者 >> javascript >> 浏览文章

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


发布日期:2018年09月19日
 
jQuery DataTables插件从服务器端获取数据的方法

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

Js代码:

{

"aaData":

{

"columnA":"valueA"

"columnB":"valueB"

}

}

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

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

Js代码:

/**

* @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 ) {

oSettingsjqXHR = $ajax( {

"url": sUrl

"data": aoData

"success": function (json) {

if ( jsonsError ) {

oSettingsoApi_fnLog( oSettings jsonsError );

}

$(oSettingsoInstance)trigger(xhr [oSettings json]);

fnCallback( json );

}

"dataType": "json"

"cache": false

"type": oSettingssServerMethod

"error": function (xhr error thrown) {

if ( error == "parsererror" ) {

oSettingsoApi_fnLog( oSettings "DataTables warning: JSON data from " + "server could not be parsed This is caused by a JSON formatting error" );

}

}

});

}

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

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

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

Js代码:

$(#example)dataTable( {

"bProcessing": true

"bServerSide": true

"sAjaxSource": "scripts/server_processingphp"

"fnServerParams": function ( aoData ) {

aoDatapush( { "name": "more_data" "value": "my_value" } );

}

});

               

上一篇:Jquery选择子控件大于号和 区别介绍及使用示例

下一篇:JavaScript的模块化:封装(闭包),继承(原型) 介绍