`
zsky1250
  • 浏览: 35810 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JQuery DataTable 1.10 使用笔记

 
阅读更多
一、配置(options)：

1.1 column 列定义： 

		"columns": [
	    {
	      "data": "platform",
	      "render": "[, ].name"
	      "defaultContent"："<button>edit</button>",
	      "cellType": "th”,
	    }
	    {......},{......}
	  ]

[list]
  • 1.data:   是数据get/set的方式。可以自己定义。有很多种方式
  • 2.render: 也类似，但是他只是改变数据的变现方式。即只改变get。
  • 3.defaultContent:如果返回的数据中没有对应的列，使用的默认值

    • 如果只是想改变表格数据的展现方式而不改变底层的数据，建议用render
     
    引用
    关于3个值的匹配顺序：
     
    返回值是undefined the columns.defaultContentDT value will be used. If there is no default content specified, an error will be given.
    返回值是null If columms.renderDT is used, the data passed to the rendering function will be the original data source for the row. If there is no renderer the columns.defaultContentDT value will be used. If there is no default content specified, for display data an empty sting will be used. -type null will be used for all other data types.
    返回值是一个functionthe function will be executed and the returned value used. As of DataTables 1.10.1 the function will be executed in the same scope as the data object for the row. The result of this is that an object instance can be used as the data source for a row.

    **对于data和render对应的值：
    (1).String,从data数据源指定一个属性名对应到这一列的显示.对应三种表示形式：
    .:对于嵌套对象可以用. 如 user.name
    []:数组可以拼合，把结果作为列的显示 如[,].name将拼合这个数组所有域的name作为一个列。如果[]中没值将用原始的数据
    ()对应一个方法 如browser.version()将执行version的方法。
    （2）null，这一级别不舍盒子，将走下一级的匹配。参看匹配顺序。
    （3）object：把显示、过滤、排序、所属类型的数据源细分 支持filter, display, type or sort这四个属性作为key。同时必须填上_ 表示默认的。value就和（1）中的要求一样。
    例子： 
    "data": {
    "_": "phone",
    "filter": "phone_filter",
    "display": "phone_display"
//把数据源中的phone对应的值作为默认数据，过滤在用phone_filter对应的值，这一列显示的是phone_display的值。
//即同一列，应对不同的需求，底层是不同的数据。
//比方说一个时间类型的域，显示的时候是YYYY-MM-DD 而用作排序就是用的时间戳
}

    （4）function 自定义一个方法，用于分情况显示数据。
    (4).1:对于data：function data( row, type, set, meta )
    • row-要应用于table中一行的数据集合。
    • type-发起调用的操作类型。对应上面说的那四种类型，用于判断用某个数据干什么用。同时还有一个set类型，用于判断现在是get值还是set值。
    • set-如果type是set那么这里就是要设置的值，从数据源读出来的。
    • meta-DT的一些相关信息。是一个对象,里面包括row--对应row().index();col--对应column().index();settings--对应DataTables.Settings
    • 返回值。如果是设置值，即对应的type===set的情况，返回值不需要
      •            如果是其他情况，返回值将作为请求的值。

    例子： 
    $('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": function ( row, type, val, meta ) {
      if (type === 'set') {
        row.price = val;
        // Store the computed dislay and filter values for efficiency
        row.price_display = val=="" ? "" : "$"+numberFormat(val);
        row.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;
        return;
      }
      else if (type === 'display') {
        return row.price_display;
      }
      else if (type === 'filter') {
        return row.price_filter;
      }
      // 'sort', 'type' and undefined all just use the integer
      return row.price;
    }
  } ]
} );

    (4).2:function render( data, type, row, meta ) 对应render的function
    • data--每一个cell对应的data 他是基于columns.data的。
    • type-发起调用的操作类型。由于render只负责渲染，不负责设置值所以他只有'filter', 'display', 'type' or 'sort'.这四个值
    • row 一行的数据（他不是基于columns.data）应该是传过来的数据单元？
    • meta  类似上面。一个对象{row,col,settings}

    **注意 想要用render前提要设置好data。
    例子： 
    // 这个例子对应的数据集合，类似这样:
//   { "phone": 5552368, "phone_filter": "5552368 555-2368", "phone_display": "555-2368", ... }
// `phone` 整型 用作排序和类型识别, `phone_filter`用来过滤。他包含两种形式，因此
// 不管用户输入那种形式都能找得到。
// 最后，格式化的phone_display 用来做显示。
$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": null, // Use the full data source object for the renderer's source
    "render": {
      "_": "phone",
      "filter": "phone_filter",
      "display": "phone_display"
    }
  } ]
} );

//同上面的一样，这回通过data先指定了对象。render从属性里挑出来显示。
// This would be used with a data source such as:
//   "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" }
$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": 'phone',
    "render": {
      "_": "plain",
      "filter": "filter",
      "display": "display"
    }
  } ]
} );

//用function来创建一个链接
$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

//截取字符
$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 4,
    "data": "description",
    "render": function ( data, type, full, meta ) {
      return type === 'display' && data.length > 40 ?
        '<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' :
        data;
    }
  } ]
} );
  • 4.cellType:指定这一组定义适用的类型 TD TH 用<td>还是<th>包裹
    • [/list]

    1.2.displayStart:分页开始的元素索引。如果想载入的时候就看某一页，可以设置这个值
    引用
    Note that this parameter is the number of records (counting from 0), rather than the page number, so if you have 10 records per page and want to start on the third page, it should be 20 rather than 2 or 3.


    1.3.stripeClasses:各行换色功能，设置CSS。
    例子： 
    $('#example').dataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ]
} );


    1.4.destroy:用('selector').datatable()的时候，如果选择器已经指向一个存在的DT，那么用新构造的DT替换原来的
    如果你想改变一个表格的属性，而这个属性还不能通过API函数修改，那么你只能用这个办法改
    如果不该DT配置，只是修改显示的数据。最好通过API改，然后调用ajax.reload().这个方法效率高

    1.5.renderer  选择一种风格，用那些html的元素去创建DOM。
    目前支持header pageButton
    例子： 
    $('#example').dataTable( {
    renderer: "bootstrap"
} );
$('#example').dataTable( {
    renderer: {
        "header": "jqueryui",
        "pageButton": "bootstrap"
    }
} );


    1.6columnDefs:
    类似于column 但是多了一个targets属性。可以指定应用到那些列。
              targets:参数
    正数从左往右的列index
    负数从右往左
    string定义好的列名


    1.7设置全局的默认值： 
    $.extend( $.fn.dataTable.defaults, {
    "searching": false,
    "ordering": false
} );


    1.8 ajax 用于服务器端交互。
    与服务器交互的重要属性。详细介绍在这里
                       
                       
    二、API
    DT使用中有两个根级别的对象。DataTables.Api 和 JQuery。DT的API大部分会要有API这个对象。
       
        使用构造器：
        
    $( selector ).DataTable(); 返回一个API对象 
$( selector ).dataTable();  返回一个JQ对象
new $.fn.dataTable.Api( selector ); 直接构造一个DT，并返回API对象。


    API<==>JQ 
    JQ对象=api对象.to$();
api对象=JQ对象.api();



    特有的选择器类(types)：

    cell-selector：当做选择器，在API.cells(cell-selector)这样的函数中的参数。
    以下这几种可以充当他的值
    stringJQ中的选择器
    nodedom中的th,td
    JQuery用JQuery对象表示的cell元素
    objectDT中的cell index值（通过row或者column方法点出来的）
    array如[ , ]元素可以包含上面的所有类型


    columns-selector：当做选择器，在API.columns()、cells()这样的函数中的参数。
    一下这几种可以充当他的值
    integercolumn中的index
    {integer}:visIdxcolumn显示的列（不包括隐藏的）的index
    {integer}:visiblecolumn显示的列（不包括隐藏的）的index
    {string}:name用columns.name定义好列的内部名字，这里用名字调用
    stringJQ中的选择器
    nodedom中的th,td
    JQuery用JQuery对象表示的cell元素
    array如[ , ]元素可以包含上面的所有类型


    row-selector：当做选择器，在API.row or cells(cell-selector)这样的函数中的参数。
    以下这几种可以充当他的值
    integer行数
    stringJQ中的选择器
    nodedom中的th,td
    JQuery用JQuery对象表示的cell元素
    array如[ , ]元素可以包含上面的所有类型


    table-selector：当做选择器，在API.table()这样的函数中的参数。
    以下这几种可以充当他的值
    integer第几个table
    stringJQ中的选择器
    nodedom中的th,td
    JQuery用JQuery对象表示的cell元素
    array如[ , ]元素可以包含上面的所有类型


    selector-modifier：用在rows(), columns() and cells()的参数中。
    过滤、排序、分页的相关属性的选择器
    他只会针对当前页面中的元素进行过滤。因此，如果用在服务器操作数据的模式上，他作用很小。
    包含的属性： 
    {
    order:  'current', //选择的数据的显示顺序  'current', 'applied', 'index',  'original'
    search: 'none',    // 'none',    'applied', 'removed'
    page:   'all'      // 'all',     'current'
}




    分享到：
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

    Global site tag (gtag.js) - Google Analytics