DataTable Learning Notes---Sorting rules, column hiding

Delayed for several days, because to do an embedded experiment-android kernel compilation and cutting, long before the Wubi do not know why the run error, and then look at the current Win7 system feel a bit annoying, but also because the fast 1.5 no machine, so on the re-installed, the results of various cups, Statistics loaded 2 times win7,2 times win8,2 Times Wubi, during the encounter not know how many problems, on the other hand limited to this hateful speed, really let me egg pain, and then a variety of pressure, I junior, to find an internship unit, there is whether the decision to take an examination, also very upset. Take a little time today and continue our DataTable study.

1.DataTable Sorting

1.1 Basic knowledge

A DataTable can be sorted in multiple columns, and in a table, press and hold shirt, and then select the columns you want to sort on. The following is a distinction between four important attributes:

Property ' Bsort ': Defines whether the entire table is sorted when initialized

$ (document). Ready (function () {  $ (' #example '). DataTable ({    "Bsort": false  });});

Property ' bsortable ': When initializing, define exactly which column is sortable

$ (document). Ready (function () {  $ (' #example '). DataTable ({    "aocolumns": [       {"bsortable": false},      NULL, NULL, NULL, NULL    ]});

Property ' aasorting ': When initializing a table, choose how to sort the rules

Sort by 3rd Column first, and then 4th column$ (document). Ready (function () {  $ (' #example '). DataTable ({    "Aaso Rting ": [[2, ' ASC '], [3, ' desc ']  }); );

Property ' assorting ': Sets the collation of which row is specific

Using aocolumns$ (document). Ready (function () {  $ (' #example '). DataTable ({    "aocolumns": [      null,      {" Assorting ": [" ASC "]},      {" assorting ": [" desc "," ASC "," ASC "]},      {" assorting ": [" desc "]},      null    ]
   } );} );

It should be clear from the above that the meanings of these four properties are different. The next step is to introduce a simple sort

1.2 Simple sorting, single column sorting

the property ' aasorting ' is used when the table is initialized, and the property value is an array.

$ (document). Ready (function () {    $ (' #example '). DataTable ({        "aasorting": [[4, "desc]]});    });

1.3 Multi-column sorting

with the above single order, plus the basic knowledge of the introduction of aasorting, the example above, there is no writing.

1.4 Special Sorting rules

Here are a few points to distinguish:

1. The first is Ssortdatatype. Defines the sort of data source type (mainly input type), Dom-text,dom-select,dom-checkbox. Suddenly found that there was a fool, the original use checkbox, it should be directly set Ssortdatatype.

2. Attribute Stype: Defines this column data type, including (string,numeric,date,html).

3. Sorting without type detection

Honestly this is quite complicated, how to write the collation, and then how to achieve, although the DataTable has an example, but not how to understand, below I give the example I changed, if there are errors, if you find a good example, welcome to share with me, if there is time I can understand its example, I will also update this blog post in time.

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 '], [' + ', ' eee ', ' ', ' 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 ': ' N Umeric-comma ', ' swidth ': ' 20% ', ' sclass ': ' Center '}, {' Stitle ': ' Date ', ' swidth ': ' 20% ', ' sclass ': ' Center '}, {' Stit ' Le ': ' downLoad ', ' swidth ': ' 20% ', ' sclass ': ' Center ', ' Mrender ': function (data, type, full) {RET              Urn ' <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);};

Define the collation of the time will definitely define two, in fact, should be three, when >,<,=. The sort types that are typically defined are numbers, with decimals, and string.

The following is a sort of a table in which some input-type are not of type text. Well, first of all, you should get a value like Type=checkbox, right?

/* Create An array with the values of the "checkboxes in a" column */$.fn.datatableext.afnsortdata[' dom-checkbox '] = Fun Ction  (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 column Hide

var tabletest;function inittable () {tabletest = $ (' #tableTest '). DataTable ({"Bjqueryui": true, "Spaginati Ontype ":" Full_numbers "," Aadata ": [[' 101 ', ' AAA ', ' 91,1 ', ' 2012-10-10 ', ' X '], [' 102 ', ' BBB ', ' 92,5 ', ' 2  012-3-19 ', ' X '], [' 103 ', ' CCC ', ' 89,5 ', ' 2013-3-21 ', ' X '], [' The ' ", ' eee ', ' ' Up ', ' 2011-11-11 ', ' C '], [' 104 ', ' DDD ', ' the ' 2013-2-22 ', ' X ', ' aasorting ': [[1, ' ASC '],[2, ' ASC '], ' aocolumns ': [{' Stitle ': ' I D ', ' swidth ': ' 20% ', ' sclass ': ' Center '}, {' Stitle ': ' Name ', ' swidth ': ' 20% ', ' sclass ': ' Center '}, {' Stitle ': ' Score ', ' swidth ': ' 20% ', ' sclass ': ' Center '}, {' Stitle ': ' Date ', ' swidth ': ' 20% ', ' sclass ': ' Center '}, {' Stitle ': ' Downloa  d ', ' 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 ($ (). Val ()); });}

There are two bvisible and bsearchable, if set Bvisible:false, then this column of data is inaccessible, Bsearchable:false is accessible, I feel this is not very good to do ah, For example, we generally like to add a column of hidden columns to the table, which records the ID of each row, convenient data access, but it seems that this trick is not possible. I would like to be able to use Mreader to do, for example, the above code, set type= ' hidden ', the experiment found no, it seems I was obviously naïve. But the thought of Mreader:function (Data,type,full) Full is all the information in this column, experimented with, but access to the hidden column, then through this disguised method can access the hidden data.

To summarize, you can get all the information (including hidden columns) by using the full parameter in Mreader:function (Data,type,full), get a list of strings, and then convert the bit array by spilt, then select the first number.

Code is not complete, that is, the meaning of {' 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]);    /output//2012-10-10//2012-3-19 2013-3-212013-2-22 2011-11-11

By clicking the button to determine if the column is visible or hidden---comes with an example

PassoTable.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);}

Click the button to determine if the column details are displayed---a sample

/* formating function for row details */function fnformatdetails (otable, nTr) {var aData = Otable.fngetdata (nTr);    var sOut = ' <table cellpadding= ' 5 "cellspacing=" 0 "border=" 0 ">"; 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.createelem    ent (' th ');    var nclonetd = document.createelement (' TD '); nclonetd.innerhtml = ' 
Effect:
Well, write for a few hours, while learning to write, there is about the DataTable this control should have some understanding, the basic operation should be, now mainly related to tabular data, this involves JSON, honestly I'm not very good, ready to find a time to learn the JSON data format, And then by the way, the DataTable gets the data and fills from the background, and adds a row, deletes a row, a complex table header, modifies the table header, quite simply, if you have time to write, or later in the project to use, then summarize it.
If everyone in the use of the DataTable this control encountered a problem, you can also give me a message, I try to help you solve, of course, I do not guarantee that I will, we learn together.
Keep on fighting!!
All of the above are personal original, please reprint the time attached to the original link: HTTP://WWW.CNBLOGS.COM/TONYLP
DataTable Learning Notes---Sorting rules, column hiding