`

DataTable学习笔记---排序细则、列隐藏

阅读更多

 耽误了好几天,因为要做一个嵌入式的实验-android内核编译与裁剪,很久之前装的wubi不知道为什么运行出错了,然后看着当前的win7系统觉得有点讨厌了,也是因为快1年半没装机了,所以就重新装机了,结果就各种杯具,统计装了2次win7,2次win8,2次wubi,期间碰到了不知多少问题,另一方面限于这可恶的网速,着实让我蛋疼了一把,然后又是各种压力,本人大三了,到了要找实习单位的时候,还有是否决定考研,也挺烦心的。今天趁着有点时间了,继续我们的dataTable学习吧。

      1.DataTable排序

             1.1 基础知识

               dataTable可以多列排序,在表格中,按住shirt,然后选择需要排序的列就可以了。下面是四个重要属性的区分:

              属性''bSort'':初始化的时候定义整个table是否排序

$(document).ready( function () {
  $(''#example'').dataTable( {
    "bSort": false
  } );
} );

              属性''bSortable'':初始化的时候定义具体哪一列是否可排序

 
$(document).ready( function() {
  $(''#example'').dataTable( {
    "aoColumns": [ 
      { "bSortable": false },
      null,
      null,
      null,
      null
    ] } );
} );
 

            属性''aaSorting'':初始化表格的时候,选择以怎样的规则排序

 
// Sort by 3rd column first, and then 4th column
$(document).ready( function() {
  $(''#example'').dataTable( {
    "aaSorting": [[2,''asc''], [3,''desc'']]
  } );
} );
 

            属性''asSorting'':设置具体哪一行的排序规则

 
// Using aoColumns
$(document).ready( function() {
  $(''#example'').dataTable( {
    "aoColumns": [
      null,
      { "asSorting": [ "asc" ] },
      { "asSorting": [ "desc", "asc", "asc" ] },
      { "asSorting": [ "desc" ] },
      null
    ]
  } );
} );
 

                 通过上面的介绍基本上应该清楚这四个属性的含义与不同了吧。接下来给介绍简单排序

             1.2 简单排序,单列排序

                  table初始化的时候使用属性''aaSorting'',属性值是一个array。

$(document).ready(function() {
    $(''#example'').dataTable( {
        "aaSorting": [[ 4, "desc" ]]
    } );
} );

             1.3 多列排序

                 有了上面的单例排序,外加基础知识里的aaSorting的介绍,范例上面就有,这里就不写了。

             1.4 特殊排序规则

                 这里需要分清几个要点:

                 1. 首先是sSortDataType.定义数据源类型的排序(主要是input类型),dom-text,dom-select,dom-checkbox。突然发现以前有个做傻了,当初用checkbox的时候,就应该直接设置sSortDataType.

                 2.属性sType:定义这列数据类型,包括(string,numeric,date,html)。

                 3.不带类型检测的排序

                    老实说这个挺复杂的,怎么写排序规则,然后怎么实现,尽管dataTable有范例,但是没怎么看懂,下面我给出我改过的范例,如果有错误,如果大家发现好一点的范例,欢迎跟我分享,如果有时间我能理解它的范例,我也会及时更新这篇博文的。

 
function initTable(){
    tableTest = $(''#tableTest'').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aaData": [
      [''101'', ''aaa'', ''91,1'', ''2012-10-10'', ''X''],
      [''102'', ''bbb'', ''92,5'', ''2012-3-19'', ''X''],
      [''103'', ''ccc'', ''89,5'', ''2013-3-21'', ''X''],
      [''105'', ''eee'', ''95'', ''2011-11-11'', ''C''],
      [''104'', ''ddd'', ''91'', ''2013-2-22'', ''X'']
    ],
        ''aaSorting'':[ [1,''asc''],[2,''asc''] ],
        ''aoColumns'':[
        {''sTitle'':''ID'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Name'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Score'', ''sType'': ''numeric-comma'',''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Date'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''downLoad'', ''sWidth'':''20%'',''sClass'':''center'',
            "mRender": function ( data, type, full ) {
                return ''<a href="''+data+''">Download</a>'';
              }}
          ]
    });
}

jQuery.fn.dataTableExt.oSort[''numeric-comma-asc'']  = function(a,b) {
    var x = (a == "-") ? 0 : a.replace(",", "." );
    var y = (b == "-") ? 0 : b.replace( ",", "." );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};
 
jQuery.fn.dataTableExt.oSort[''numeric-comma-desc''] = function(a,b) {
    var x = (a == "-") ? 0 : a.replace(",", "." );
    var y = (b == "-") ? 0 : b.replace( ",", "." );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};
 

      定义排序规则的时候肯定会定义两个,其实应该是三个,当>,<,=..一般定义的排序类型有数字,带小数的,string。

      下面是当表格中是一些input-type不是text类型的排序。那么首先应该先获取例如type=checkbox的值对吧

 
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData[''dom-checkbox''] = function  ( oSettings, iColumn )
{
    var aData = [];
    $( ''td:eq(''+iColumn+'') input'', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
        aData.push( this.checked==true ? "1" : "0" );
    } );
    return aData;
}
 

      2.DataTable列隐藏

 
var tableTest;
function initTable(){
    tableTest = $(''#tableTest'').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aaData": [
      [''101'', ''aaa'', ''91,1'', ''2012-10-10'', ''X''],
      [''102'', ''bbb'', ''92,5'', ''2012-3-19'', ''X''],
      [''103'', ''ccc'', ''89,5'', ''2013-3-21'', ''X''],
      [''105'', ''eee'', ''95'', ''2011-11-11'', ''C''],
      [''104'', ''ddd'', ''91'', ''2013-2-22'', ''X'']
    ],
        ''aaSorting'':[ [1,''asc''],[2,''asc''] ],
        ''aoColumns'':[
        {''sTitle'':''ID'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Name'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Score'',''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Date'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''downLoad'', ''sWidth'':''20%'',"bVisible": false,"bSearchable": false, ''sClass'':''center'',
            "mRender": function ( data, type, full ) {
                return ''<input type="text" class="userName" value="''+data+''"/>'';
              }}
          ]
    });
    
    $(''#tableTest'').find(''.userName'').each(function(){
        console.log($(this).val());
    });
}
 

       有两个bVisible和bSearchable,如果设置bVisible:false,那么这列数据是不可访问的,bSearchAble:false是可以访问的,我感觉这边做的不是很好哎,就比方说我们一般都喜欢对表添加一列隐藏列,里面记录每行的id,方便数据访问,但是貌似这招这样不行。我想能不能用mReader来做,就比方上面代码,设置type=''hidden'',试验发现不行,看来我是明显天真了。但是想到mReader:function(data,type,full)其中的full就是这一列的所有信息,试验了一下,的却访问隐藏的那一列,那么通过这种变相的方法就可以访问隐藏的数据了。

      总结一下,可以通过mReader:function(data,type,full)中的full参数获取一行所有信息(包括隐藏列),获取到的是一列字符串,然后通过spilt转换位数组,然后选取第几个。

 
//代码不全,就是那么个意思
{''sTitle'':''ID'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Name'', ''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Score'',''sWidth'':''20%'',''sClass'':''center''},
        {''sTitle'':''Date'', ''sWidth'':''20%'',''bVisible'':false,''sClass'':''center''},
        {''sTitle'':''downLoad'', ''sWidth'':''20%'',"bSearchable": false, ''sClass'':''center'',
            "mRender": function ( data, type, full ) {
                return ''<input type="text" class="userName" value="''+full+''"/>'';
              }}
          ]
    });
    var s;
    var data;
    $(''#tableTest'').find(''.userName'').each(function(){
        var data = $(this).val();
        var s = data.split(",");
        console.log(s[3]);
    });
//输出
//2012-10-10 
//2012-3-19 
2013-3-21
2013-2-22 
2011-11-11
 

   通过点击按钮确定该列是否可见或是隐藏---自带了范例

  通过oTable.fnSetColumnVis(iCol,1/0);前一个参数是第几列。下面的代码应该挺好看懂的吧。

 
$(document).ready(function() {
    $(''#example'').dataTable( {
        "sScrollY": "200px",
        "bPaginate": false
    } );
} );
 
function fnShowHide( iCol )
{
    /* Get the DataTables object again - this is not a recreation, just a get of the object */
    var oTable = $(''#example'').dataTable();
     
    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
    oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
 

   通过点击按钮确定是否显示该列详细信息---自带范例

  

 
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = ''<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'';
    sOut += ''<tr><td>Rendering engine:</td><td>''+aData[1]+'' ''+aData[4]+''</td></tr>'';
    sOut += ''<tr><td>Link to source:</td><td>Could provide a link here</td></tr>'';
    sOut += ''<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>'';
    sOut += ''</table>'';
     
    return sOut;
}
 
$(document).ready(function() {
    /*
     * Insert a ''details'' column to the table
     */
    var nCloneTh = document.createElement( ''th'' );
    var nCloneTd = document.createElement( ''td'' );
    nCloneTd.innerHTML = ''<img src="../examples_support/details_open.png">'';
    nCloneTd.className = "center";
     
    $(''#example thead tr'').each( function () {
        this.insertBefore( nCloneTh, this.childNodes[0] );
    } );
     
    $(''#example tbody tr'').each( function () {
        this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
    } );
     
    /*
     * Initialse DataTables, with no sorting on the ''details'' column
     */
    var oTable = $(''#example'').dataTable( {
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 0 ] }
        ],
        "aaSorting": [[1, ''asc'']]
    });
     
    /* Add event listener for opening and closing details
     * Note that the indicator for showing which row is open is not controlled by DataTables,
     * rather it is done here
     */
    $(''#example tbody td img'').live(''click'', function () {
        var nTr = $(this).parents(''tr'')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
            /* This row is already open - close it */
            this.src = "../examples_support/details_open.png";
            oTable.fnClose( nTr );
        }
        else
        {
            /* Open this row */
            this.src = "../examples_support/details_close.png";
            oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), ''details'' );
        }
    } );
} );
 

效果截图:

 

       好了,写了也好几个小时了,一边学一边写,有关于DataTable这个控件大家应该有一些了解了,基本的操作都应该会了吧,现在主要涉及到表格数据,这个涉及到json,老实说我还不太会呢,准备找个时间学一下json数据格式,然后顺便讲讲dataTable从后台获取数据以及填充;还有增加一行,删除一行,复杂表头,修改表头,挺简单的吧,有时间的话就写一下,或者以后项目中用到的话,到时候总结吧。

       如果大家在使用DataTable这个控件的时候遇到了问题,也可以给我留言,我尽量帮大家解决,当然我不保证我肯定会,大家一起学习。

       Keep on fighting!!

       以上全部都属个人原创,请大家转载的时候附上原创链接: http://www.cnblogs.com/tonylp

 

 

本文来源于:http://www.16aspx.com/Article/3351

分享到:
评论

相关推荐

    Ajax-datatable-using-ajax-php.zip

    Ajax-datatable-using-ajax-php.zip,使用ajax php的数据表,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...

    angular2-datatable, 带有排序和分页的Angular2简单表组件.zip

    angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件,具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts

    gridview—datatable -dataset -dataview

    它提供了一种灵活的方式来筛选、排序和分组数据,而无需更改底层的DataTable。DataView还支持行状态过滤,如只显示添加的新行或已修改的行。此外,DataView可以直接绑定到控件,如GridView,实现数据的动态显示。 ...

    List-DataTable-2019-01-03.zip

    标题 "List-DataTable-2019-01-03.zip" 提示我们这是一个关于在C#中处理数据表转换的项目,日期为2019年1月3日。这个项目可能涉及将列表(List)对象转换为数据表(DataTable)或反之。在描述中,提到了使用第三方库...

    Python库 | django_ajax_datatable-4.0.2-py2.py3-none-any.whl

    资源分类:Python库 所属语言:Python 资源全名:django_ajax_datatable-4.0.2-py2.py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    datatable的固定列插件

    其他还有`width`来指定固定列的宽度,`orderCellsTop`决定是否在固定列顶部进行排序等。完整的配置选项可以在官方文档中查看。 **5. 与其他插件的集成** `FixedColumns`可以很好地与其他`Datatable`插件(如...

    Jquery dataTable显示指定列

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

    C#学习笔记--关于C#学习的笔记

    【C#学习笔记--关于C#学习的笔记】 在学习C#编程语言的过程中,数据库连接是必不可少的一部分。这里我们讨论如何连接到SQLExpress版本的数据库。在C#中,使用SqlConnection对象来创建数据库连接,例如: ```csharp...

    datatable 隐藏列

    本篇文章将深入探讨如何在`Datatable`中实现列的隐藏功能。 `Datatable`提供了灵活的API来操作表格,包括隐藏和显示列。在`Datatable`中,列的隐藏主要通过设置列的`visible`属性来完成。这个属性可以接受一个布尔...

    ngx-datatable-master.zip

    10. **示例和文档**:ngx-datatable-master.zip 中可能包含的示例代码和文档可以帮助开发者快速上手,学习如何使用和配置组件。 总之,ngx-datatable 是一个强大且灵活的 Angular 数据表格解决方案,它提供了许多...

    重写Datatable.js,支持纯前台排序

    "重写Datatable.js,支持纯前台排序"这个项目聚焦于解决原生Datatable.js库在实现前台排序时遇到的兼容性和控制混乱问题。Datatable.js是一款广泛使用的JavaScript插件,用于创建动态、交互式的HTML表格,但随着项目...

    datatable学习资料

    **Datatable学习指南** 在IT领域,特别是在Web开发中,数据展示是不可或缺的一部分。DataTable是一个强大的JavaScript库,它允许开发者创建交互式、功能丰富的表格,能够处理大量的数据并提供多种排序、过滤和分页...

    DataTable分类求和,分类汇总,排序

    如果需要多列排序,可以使用逗号分隔列名和排序顺序(ASC或DESC)。 5. **DataRow集合**: DataTable中的每一行数据都表示为DataRow对象。我们可以遍历DataRowCollection来访问和修改每行数据。例如,`foreach ...

    datatable排序

    然后,`columnDefs`配置了第一列的排序类型为日期,这样在进行排序时,DataTable会根据日期格式正确地比较数据。 除了默认的文本排序,DataTable还支持自定义排序函数。如果你需要对特定列进行特殊的排序逻辑,可以...

    vue-datatable-url-sync:将数据表过滤器,排序和选项与查询参数同步。 在Vue2和Vue3中

    vue-datatable-url-sync 将数据表过滤器,排序和选项与查询参数同步。 在Vue2和Vue3中,使用api组成! 目标与解释 作为用户,您是否曾经在Datable中进行过滤或导航,打开Datable的一项,返回到Datable,然后看到您...

    ngxdatatable是一个用来展示大型复杂数据的Angular组件

    在"swimlane-ngx-datatable-e77e086"这个压缩包中,可能包含了ngx-datatable的源代码、示例项目、文档和资源,开发者可以通过研究这些内容来学习如何在自己的项目中集成和使用ngx-datatable。了解并掌握这个组件,将...

    DataTable-Buttons-Test

    在本案例中,“DataTable-Buttons-Test”是一个项目,旨在测试`DataTable`库中的“按钮”功能。这个项目可能包含了实现各种按钮操作的示例代码,例如导出数据、分页、排序等。 `DataTable`库的核心特性之一是其强大...

    根据csv文件的路径把该文件转换为datatable

    通过`Split`方法按逗号分割字符串,然后为每一列创建一个新的`DataColumn`对象,并将其添加到`DataTable`中。 4. **填充数据**:对于之后的每一行,创建一个新的`DataRow`对象,并将当前行的数据填充到该行中,最后...

    datatable的例子使用--增加删除修改查询

    通过学习和实践,你将能够熟练掌握DataTable的基本用法,提升Web应用的用户体验。 在提供的“web”文件中,可能包含了实现这些功能的相关HTML、CSS、JavaScript代码,以及服务器端的处理脚本。通过对这些文件的研究...

Global site tag (gtag.js) - Google Analytics