zoukankan      html  css  js  c++  java
  • jquery datatable ajax配置详解

    我写的这个东西类似于个人笔记,如果你想要完整的而了解 
    可以去这里看看 http://dt.thxopen.com/ 
    包括英文原网站都不错. 

    通过配置ajax的属性和服务器交互 

    $("selector").dataTable( 
        "processing" : true,//显示“处理中...” 
        "serverSide" : true,//开启服务器模式。 
        "data":[....], 
        "ajax":{.....} 
    ); 

    处理模式(Processing modes)

    DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):

    • 客户端处理(Client)—— 所有的数据集预先加载(一次获取所有数据),数据处理都是在浏览器中完成的【逻辑分页】。
    • 服务器端处理(ServerSide)—— 数据处理是在服务器上执行(页面只处理当前页的数据)【物理分页】。

    每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。 请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。

    PS:当然这个不是一定的,针对数据是可增长的,不确定最终数据是多少那么最好是选择服务器模式,如果是确定的数据,利用缓存选择客户端模式也未尝不可

    服务器模式  :需要启用 serverSideOption 属性,完整的介绍参考 服务器处理(server-side)


    首先明确:ajax负责数据传输部分,columns负责定义数据(怎么显示,怎么对应等) 

    data就是一个数据源。用column定于数据的对应关系后。从data里读取实际数据。 

    data可以是二维数组,或者是对象数组 
    例子: 

    Js代码  收藏代码
    1. $('#example').dataTable( {  
    2.     "data": [  
    3.         [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],  
    4.         [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ],  
    5.         // ...  
    6.     ]  
    7.     //or...  
    8.   "data": [  
    9.         {  
    10.             "name":       "Tiger Nixon",  
    11.             "position":   "System Architect",  
    12.             "salary":     "$3,120",  
    13.             "start_date": "2011/04/25",  
    14.             "office":     "Edinburgh",  
    15.             "extn":       5421  
    16.         },  
    17.         {  
    18.             "name": "Garrett Winters",  
    19.             "position": "Director",  
    20.             "salary": "5300",  
    21.             "start_date": "2011/07/25",  
    22.             "office": "Edinburgh",  
    23.             "extn": "8422"  
    24.         },  
    25.         // ...  
    26.     ],  
    27.   
    28. } );  



    下面介绍正菜 
    ajax 
    他有三种用法: 
    1.是一个string类型 
    设置一个url对应一份远程的json文件。他期待返回一个叫“data”的数组。如果你通过dataSrc指定为对象,那他就要求返回一个对象数组。 
    例子 

    Js代码  收藏代码
    1. $('#example').dataTable( {  
    2.   "ajax": "data.json"  
    3. } );  



    2.是一个对象类型 
    形式如: 

    Js代码  收藏代码
    1. ajax:{  
    2.   url:"...",  
    3.   type:"post",  
    4.   //就是jquery.ajax那里面能设置什么他就能设置什么,其实原理也是把这个配置对象传给jquery.ajax那个函数执行。  
    5.   //除此 他还支持三个特有的参数  
    6.   data:"...",//设置发送给服务器的数据(名称、格式)  
    7.   dataSrc:"...",//这是从服务器接受的数据(名称、格式)  
    8.   success:'...'//回调函数。不要修改!DT会默认使用它。想改交互参数找前两项就行  
    9. }  



    这种方式最好用,详细介绍下那三个特殊参数: 

    2.1 ajax.data 
    他实际上就是$.ajax.data的属性。DT有加了一些扩展 
    2.1.1 如果是一个object 
    你可以附加一下参数,连同DT提交的参数一起传给服务器 
    例子: 

    Js代码  收藏代码
    1. $('#example').dataTable( {  
    2.   "ajax": {  
    3.     "url": "data.json",  
    4.     "data": {  
    5.         "user_id": 451  
    6.     }  
    7.   }  
    8. } );  


    2.1.2 如果是一个function 
    这个function接受一个object,代表了DT内部传给服务器的data集合。 
    可以返回一个object。这个object可以是你修改后的在请求参数集合(DT不会将他内建的data集合和这个object合并) 
    也可以什么都不返回(即返回空)。这样DT会把默认的data集合传给服务器(也可以在方法体里把你定制的参数附加到data集合中,这样穿data集合的时候也把附加参数传回去了) 
    例子: 

    Js代码  收藏代码
    1. $('#example').dataTable( {  
    2.   "ajax": {  
    3.     "url": "data.json",  
    4.     "data": function ( d ) {  
    5.         d.extra_search = $('#extra').val();  
    6.     }  
    7.   }  
    8. } );  
    9. $('#example').dataTable( {  
    10.   "ajax": {  
    11.     "url": "data.json",  
    12.     "data": function ( d ) {  
    13.       return $.extend( {}, d, {  
    14.         "extra_search": $('#extra').val()  
    15.       } );  
    16.     }  
    17.   }  
    18. } );  



    2.2 ajax.dataSrc 
    处理从服务器返回来的请求集合 

    2.2.1 如果是一个string 
    指定用于dt中table body的数据对象名字(如果返回来的不是一个对象,而是一个纯数组。那么这个地方设为"") 
    一般ajax返回来的请求,除了数据部分,还包括分页,排序等等其他信息 
    这里的string就是指数据部分对应的对象的名字。 
    例子: 

    Js代码  收藏代码
    1. $('#example').dataTable( {  
    2.   "ajax": {  
    3.     "url": "data.json",  
    4.     "dataSrc": "tableData"  
    5.   }  
    6. //假设传回的集合是{tableData:[{...},{...}],page:{...},...}  
    7. } );  



    2.2.2 如果是一个function 
    他就受一个object 代表了服务器发来的全部请求内容(不仅仅是data!) 
    返回一个array 你定制完成以后,DT用来构造table的用的数据 
    例子: 

    Js代码  收藏代码
    1. $('#example').dataTable( {  
    2.   "ajax": {  
    3.     "url": "data.json",  
    4.     "dataSrc": function ( json ) {  
    5.       for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {  
    6.         json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';  
    7.       }  
    8.       return json.data;  
    9.     }  
    10.   }  
    11. } );  



    2.3 sucess 
    请求成功以后DT默认做的事情在这个函数中,因为DT要使用这个做构建操作。所以不要覆盖他。如果想修改,可以通过dataSrc或者下面介绍的完全控制的方式,修改接入点。 

    3.如果ajax是一个function 
    那么你通过这个function可以完全控制ajax请求。 
    function ajax( data, callback, settings ) 
    data - 发送到服务器的参数 
    callback - 回调函数 服务器回传的集合应该传给这个回调函数,作为其参数 
    settings - DT的配置对象。 
    例子: 

    Js代码  收藏代码
      1. $('#example').dataTable( {  
      2.   "ajax": function (data, callback, settings) {  
      3.     callback(  
      4.       JSON.parse( localStorage.getItem('dataTablesData') )  
      5.     );  
      6.   }  
      7. } ); 
  • 相关阅读:
    PAT 1097. Deduplication on a Linked List (链表)
    PAT 1096. Consecutive Factors
    PAT 1095. Cars on Campus
    PAT 1094. The Largest Generation (层级遍历)
    PAT 1093. Count PAT's
    PAT 1092. To Buy or Not to Buy
    PAT 1091. Acute Stroke (bfs)
    CSS:word-wrap/overflow/transition
    node-webkit中的requirejs报错问题:path must be a string error in Require.js
    script加载之defer和async
  • 原文地址:https://www.cnblogs.com/keyi/p/6733738.html
Copyright © 2011-2022 走看看