A method to control the display and hiding of Datatable table data

Abstract

The present invention discloses a method for controlling the display and hiding of Datatable table data, which relates to the field of advanced table interaction, including: first completing the initial establishment of the table; then adding all table columns to be displayed; then adding hidden attributes to the columns to be hidden according to requirements; then modifying its JavaScript, adding hidden list data functions, modifying the css of the datatable; and finally obtaining the id of the button image that controls the display and hiding. , bind a click event to it, and modify the image display status according to the visibility; through the method of the present invention, the user can flexibly control the visibility of the header (column) data on the page by clicking a button according to actual usage needs.

Description

Technical Field

[0001] The present invention relates to the field of advanced table interaction, and in particular to a method for controlling the display and hiding of Datatable table data. Background Art

[0002] The statements in this section merely provide background information related to the present disclosure and may not constitute prior art.

[0003] Datatable is a jQuery table plugin. It is a widely used table tool that has functions such as displaying table data in rows and columns, paging, filtering and sorting.

[0004] In the existing table plug-in, the display configuration of the table header (column) items is basically fixed in the code. When the number of table columns is too large, the screen overflows, and it is impossible to self-classify and display according to the importance and priority of information, and it is impossible to hide part of the table header (column) information and control its visibility.

[0005] When the order or visibility of the table header (column) needs to be adjusted, it needs to be modified in the code, which has poor flexibility and modifiability; if the cells have a lot of content, the displayed content will be incomplete and it will not be clear at a glance. The existing technical solutions cannot customize the list information that needs to be hidden or displayed according to the needs, and the actual operability and flexibility are not strong. In addition, the display will be abnormal due to reasons such as screen resolution, affecting the user experience. Summary of the invention

[0006] The present invention aims to solve the following problems that occur when calling Datatable to display table data content:

[0007] 1. When there are too many table headers (columns), the screen overflows;

[0008] 2. Unable to display the header (column) information in a classified manner according to its importance and priority;

[0009] 3. It is impossible to hide some header (column) information and control its visibility;

[0010] These types of problems.

[0011] This method is a JavaScript extension, has no hardware environment requirements, can be used for a variety of front-end page development, and is highly practical. By modifying and improving the original datatable's js and css codes, as well as calling functions, users can solve the above problems in the operation interface according to actual usage needs.

[0012] The technical solution of the present invention is as follows:

[0013] A method for controlling the display and hiding of Datatable table data, comprising:

[0014] Step S1: Complete the initial creation of the table on the HTML page;

[0015] Step S2: On the same HTML page, add all the table columns to be displayed;

[0016] Step S3: Add the "hidden="hidden"" attribute to the columns to be hidden, including and , to hide them as required;

[0017] Step S4: When initializing datatable, modify its JavaScript;

[0018] Step S5: Add hidden list data function and modify the css of datatable;

[0019] Step S6: Get the id of the button image that controls visibility , bind a click event to it, click the image, display the list data or hide the list data, and modify the image display status according to the display or hiding.

[0020] Furthermore, the step S1 comprises:

[0021] Load the table grid in the html page, add the table id, and add the JS and css of the jquery table plug-in datatable; the table id includes: and.

[0022] Furthermore, the step S4 comprises:

[0023] Step S41: When the HTML page is initialized, get the id of the datatable, create elements nCloneTh and nCloneTd for the table, and control the visible and invisible button images and their ids. ;

[0024] Step S42: By traversing the created elements, the button image is placed in the first column of the table.

[0025] Furthermore, the step S5 comprises:

[0026] Step S51: Get all column data;

[0027] Step S52: standardizing the display area of ​​hidden column data;

[0028] Step S53: Hide the display of column information, and the number after the aData array indicates the column number.

[0029] Furthermore, the step S6 comprises:

[0030] Step S61: Bind a click function to the button image;

[0031] Step S62: Add a method for displaying and hiding information in the function.

[0032] Furthermore, a method for displaying and hiding information is added to the function, including:

[0033] Determine whether the hidden table data is displayed. If it is displayed, click the picture to change it to hidden and switch the picture to the open state; otherwise, if the table data state is hidden, click the picture to change the display, call the function generated in step S5, and switch the picture to the closed state.

[0034] Compared with the prior art, the present invention has the following beneficial effects:

[0035] Through the method of the present invention, the user can flexibly control the display and hiding of the header (column) data on the page by clicking a button according to actual use requirements. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 This is a flow chart of a method for controlling the visibility of Datatable table data;

[0037] Figure 2 Hide the result graph for the example list data;

[0038] Figure 3 Displays a result graph for the example tabular data. DETAILED DESCRIPTION

[0039] It should be noted that relational terms such as "first" and "second" are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0040] The features and performance of the present invention are further described in detail below in conjunction with the embodiments.

[0041] Embodiment 1

[0042] This embodiment is based on Figure 2 The table information in the Datatable table is described to explain the method of controlling the display and hiding of the Datatable table data, which specifically includes the following steps:

[0043] Step S1: Complete the initial creation of the table on the HTML page;

[0044] Step S2: On the same HTML page, add all the table columns to be displayed;

[0045] Step S3: Add the "hidden="hidden"" attribute to the columns to be hidden, including and , to hide them as required;

[0046] Step S4: When initializing datatable, modify its JavaScript;

[0047] Step S5: Add hidden list data function and modify the css of datatable;

[0048] Step S6: Get the id of the button image that controls visibility , bind a click event to it, click the image, display the list data or hide the list data, and modify the image display status according to the display or hiding.

[0049] In this embodiment, specifically, step S1 includes:

[0050] Load the grid (grid, use grid control to build table) of table in html (Hypertext Markup Language, a standard markup language for creating web pages) page, add table id (unique identifier), and add JS (JavaScript is abbreviated as "JS", which is a lightweight, interpreted or just-in-time compiled programming language with function priority. Function: embed dynamic text in HTML page, respond to user browser events, and implement related functions) and css (Cascading Style Sheet, function: describe HTML document style, here the table is displayed by calling the original datatable css style); the table id includes: (table header content) and (table body content).

[0051] In this embodiment, specifically, step S4 includes:

[0052] Step S41: When the HTML page is initialized, get the id of the datatable, create elements nCloneTh and nCloneTd for the table, and control the visible and invisible button images and their ids. :

[0053] ' <img src＝" static lib advanced-datatable images details_open.png"> '

[0054] Step S42: By traversing the created elements, place the button image in the first column of the table:

[0055] $('#hidden-table-info thead tr').each(function(){

[0056] this.insertBefore(nCloneTh,this.childNodes[0]);

[0057] });

[0058] $('#hidden-table-info tbody tr').each(function(){

[0059] this.insertBefore(nCloneTd.cloneNode(true),this.childNodes[0]);

[0060] }).

[0061] In this embodiment, specifically, step S5 includes:

[0062] Step S51: Get all column data: var aData = oTable.fnGetData(nTr);

[0063] Step S52: Standardize the display area of ​​hidden column data: var sOut = '

[0064]

[0065]

[0066]

[0067]

[0068]

[0069]

[0070]

[0071]

[0072]

[0073]

[0074]

[0075]

[0076] <table cellpadding＝"5"cellspacing＝"0"border＝"0"style＝"padding-left:50px；">'; Step S53: Hide the display of column information, the number after the aData array indicates the column number (counting starts from 0): sOut+=' Natural Village: '+aData[5]+' ';sOut+=' Village Number: '+aData[6]+' ';sOut+=' Account Number: '+aData[7]+' ';sOut+=' Room Number: '+aData[8]+' ';sOut+=' longitude: '+aData[9]+' ';sOut+=' latitude: '+aData

[10] +' ';sOut+=' high: '+aData

[11] +' ';sOut+=' ID Number: '+aData

[13] +' ';sOut+=' Note 1: '+aData

[35] +' ';sOut+=' Note 2: '+aData

[36] +' ';sOut+=' Note 3: '+aData

[37] +' ';sOut+=' '.

[0077] In this embodiment, specifically, step S6 includes:

[0078] Step S61: Bind the click function to the button image: $('#hidden-table-info tbody td img').bind('click',function(){});

[0079] Step S62: Add a method for displaying and hiding information in the function.

[0080] Furthermore, a method for displaying and hiding information is added to the function, including:

[0081] Determine whether the hidden table data is displayed. If it is displayed, click the picture to change it to hidden and switch the picture to open state; on the contrary, if the table data state is hidden, click the picture to change the display, call the function generated in step S5, and switch the picture to close state;

[0082] Right now:

[0083] var nTr=$(this).parents('tr')[0];

[0084]

[0085] The above-mentioned embodiments only express the specific implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the protection scope of the present application. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the technical solution concept of the present application, and these all belong to the protection scope of the present application.

[0086] This background section is provided to generally present the context of the invention, and the work of the presently named inventors, the work to the extent described in this background section, and aspects of this section that did not constitute prior art at the time of application are neither explicitly nor implicitly admitted to be prior art to the present invention.

Claims

1. A method for controlling the visibility of Datatable table data, characterized in that: include: Step S1: Complete the initial creation of the table on the HTML page; Step S2: Add all table columns to be displayed on the same HTML page; Step S3: Add the "hidden="hidden"" attribute to the columns to be hidden, including and , to hide them as required; Step S4: When initializing datatable, modify its JavaScript; Step S5: Add hidden list data function and modify the css of datatable; Step S6: Get the id of the button image that controls visibility , bind a click event to it, click the image, display the list data or hide the list data, and modify the image display status according to the display or hiding.

2. A method for controlling the display and hiding of Datatable table data according to claim 1, characterized in that: The step S1 comprises: Load the table grid in the html page, add the table id, and add the JS and css of the jquery table plug-in datatable; the table id includes: and.

3. A method for controlling the display and hiding of Datatable table data according to claim 2, characterized in that: The step S4 comprises: Step S41: When the HTML page is initialized, get the id of the datatable, create elements nCloneTh and nCloneTd for the table, and control the visible and invisible button images and their ids. ; Step S42: Place the button image in the first column of the table by traversing the created elements.

4. A method for controlling the display and hiding of Datatable table data according to claim 3, characterized in that: The step S5 comprises: Step S51: Get all column data; Step S52: standardizing the display area of ​​hidden column data; Step S53: Hide the display of column information, and the number after the aData array indicates the column number.

5. A method for controlling the display and hiding of Datatable table data according to claim 4, characterized in that: The step S6 comprises: Step S61: Bind a click function to the button image; Step S62: Add a method for displaying and hiding information in the function.

6. A method for controlling the display and hiding of Datatable table data according to claim 5, characterized in that: Add methods to display and hide information in the function, including: Determine whether the hidden table data is displayed. If it is displayed, click the picture to change it to hidden and switch the picture to the open state; otherwise, if the table data state is hidden, click the picture to change the display, call the function generated in step S5, and switch the picture to the closed state.

Images