Datatable learning notes-sorting rules and column hiding [3]

It has been delayed for several days, because we have to do an embedded experiment-android kernel compilation and cropping. The wubi installed a long time ago does not know why the operation has failed, then I looked at the current win7 system and felt a little annoying. It was also because I had no installation in just one and a half years, So I re-installed it. As a result, I installed Windows twice in statistics, two Win8 and two wubi sessions, I encountered some unknown problems. On the other hand, restricted by this nasty network speed, it really hurt me, and then it was a lot of pressure. I am a junior, it is also annoying to determine whether or not to take the postgraduate entrance exam when you are looking for an internship. It's a bit of time today. Let's continue learning about datatable.

1. datatable sorting

1.1 Basic Knowledge

Datatable can sort multiple columns. In the table, hold down the shirt and select the columns to be sorted. The following are the differences between the four important attributes:

Attribute 'bsort ': determines whether the entire table is sorted during initialization.

$ (Document). Ready (Function() {$ ('# Example'). Datatable ({"Bsort ":False});});
 

Attribute 'bsortable': Specifies the column to be sorted during initialization.

$ (Document). Ready (Function() {$ ('# Example'). Datatable ({"Aocolumns":[{"Bsortable ":False},Null,Null,Null,Null]}) ;});
 

Attribute 'aasorting ': Specifies the sort rules used to initialize the table.

//Sort by 3rd column first, and then 4th column$ (Document). Ready (Function() {$ ('# Example'). Datatable ({"Aasorting": [[2, 'asc '], [3, 'desc']}) ;});
 

Attribute 'assorting': Specifies the sorting rule for a specific row.

//Using aocolumns$ (Document). Ready (Function() {$ ('# Example'). Datatable ({"Aocolumns":[Null,{"Assorting": ["ASC"]}, {"Assorting": ["DESC", "ASC", "ASC"]}, {"Assorting": ["DESC"]},Null]}) ;});
 

Through the above introduction, we should be clear about the meanings of these four attributes. Next we will introduce simple sorting.

1.2 simple sorting and single column sorting

During table initialization, the attribute 'aasorting 'is used. The attribute value is an array.

 
$ (Document). Ready (Function() {$ ('# Example'). Datatable ({"Aasorting": [[4, "DESC"]}) ;});
 

Sorting of more than 1.3 Columns

With the singleton sorting above, and the introduction of aasorting in basic knowledge, the examples are shown above and will not be written here.

1.4 Special sorting rules

Here we need to clarify several points:

1. The first is ssortype ype. It defines the sorting of data source types (mainly the input type), dom-text, dom-select, and Dom-checkbox. I suddenly found that I was stupid. When I used checkbox, I should directly set ssortype ype.

2. Attribute stype: defines the data type of this column, including (string, numeric, date, html ).

3. Sorting without type detection

To be honest, this is quite complicated. How to Write sorting rules and how to implement them? Although datatable has examples, I don't know how to understand them. Below is an example of my change. If there is an error, if you find a better example, please share it with me. If you have time to understand it, I will update this blog post in time.

 Function  Inittable () {tabletest = $ ('# Tabletest' ). Datatable ({ "Bjqueryui ": True , "Spaginationtype": "full_numbers" , "Aadata" :[[ '123', 'aaa', '91, 1', '1970-10-10 ', 'X' ], [ '123', 'bbb ', '92, 5', '2017-3-19', 'X' ], [ '123', 'ccc ', '89, 5', '2017-3-21', 'X' ], [ '000000', 'Eee ', '95', '2017-11-11', 'C' ], [ '123', 'ddd ', '91', '1970-2-22 ', 'X' ], 'Aasorting': [[1, 'asc '], [2, 'asc' ], 'Aocolumns':[{ 'Stitle': 'id', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'name', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'score ', 'stype': 'numeric-comm', 'swidth': '000000', 'sclass': 'center' },{ 'Stitle': 'date', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'Download', 'swidth': '000000', '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 ));}; 

When you define a sorting rule, two will be defined. In fact, there should be three. When >,<,=..., the sorting types are generally defined as numbers, decimal places, and strings.

The following table lists the sorting of input-type and not text type. First, obtain the value of type = checkbox, right?

/*Create an array with the values of all the checkboxes in a column*/$. FN. datatableext. afnsortdata ['Dom-checkbox'] =Function(Osettings, icolumn ){VaRAData =[]; $ ('Td: eq ('+ icolumn +') input', osettings. OAPI. _ fngettrnodes (osettings). Each (Function() {AData. Push (This. Checked =True? "1": "0");});ReturnAData ;}
 

2. datatable column hiding

VaR  Tabletest;  Function  Inittable () {tabletest = $ ('# Tabletest' ). Datatable ({ "Bjqueryui ": True  , "Spaginationtype": "full_numbers" , "Aadata" :[[ '123', 'aaa', '91, 1', '1970-10-10 ', 'X' ], [ '123', 'bbb ', '92, 5', '2017-3-19', 'X' ], [ '123', 'ccc ', '89, 5', '2017-3-21', 'X'], [ '000000', 'Eee ', '95', '2017-11-11', 'C' ], [ '123', 'ddd ', '91', '1970-2-22 ', 'X' ], 'Aasorting': [[1, 'asc '], [2, 'asc' ], 'Aocolumns' :[{ 'Stitle': 'id', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'name', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'score ', 'swidth': '000000', 'sclass': 'center' },{ 'Stitle': 'date', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'Download', 'swidth': '000000', "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 ());});} 

There are two bvisible and bsearchable. If bvisible: false is set, the data in this column is inaccessible, and bsearchable: false is accessible. I don't think this is a good solution, for example, we generally like to add a Hidden Column to a table, which records the IDs of each row to facilitate data access, but it does not seem to work. I don't want to use mreader.Code, Set type = 'hiddy', the test found that it is not good, it seems that I am obviously naive. However, when we think of mreader: function (data, type, full), full is all the information in this column. We tried it and accessed the Hidden Column, in this way, you can access the hidden data.

To sum up, you can use the full parameter in mreader: function (data, type, full) to obtain all the information of a row (including hidden columns) and obtain a column of strings, then, use the spilt to convert the bit array, and then select the number.

 //  The code is incomplete. {'Stitle': 'id', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'name', 'swidth': '000000', 'sclass ': 'center' },{ 'Stitle': 'score ', 'swidth': '000000', 'sclass': 'center' },{ 'Stitle': 'date', 'swidth': '000000', 'bvisable ': False , 'Sclass ': 'center' },{ 'Stitle': 'Download', 'swidth': '000000', "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

Click the button to check whether the column is visible or hidden. The example is provided.

PassOtable.Fnsetcolumnvis (icol, 1/0); the first parameter is the column number. The following code should be quite understandable.

$ (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 check whether the detailed information of the column is displayed-Example

 /*  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> cocould 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 = '' ; 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' );}});}); 

Effect:

 

Okay, I 've been writing it for several hours. I have been learning and writing it. You should have some knowledge about the datatable control. The basic operations should all be done. Now it mainly involves table data, this involves JSON. To be honest, I still don't know much about it. I am going to find a time to learn the JSON data format. Then, let's talk about datatable's data acquisition and filling in from the background. I also want to add a row and delete a row, it's easy to modify a complicated table header. If you have time, write it or use it in future projects.

If you encounter problems when using the datatable control, you can also leave a message for me. I will try my best to help you solve the problem. Of course, I am not sure I will, and everyone will study together.

Keep on fighting !!

All of the above are personal originals. Please refer to the original link when you reprint it:Http://www.cnblogs.com/tonylp