While developing an application, there is a necessary of showing and hiding the particular controls during the run time. Today’s tip is how to show or hide a Jquery controls dynamically.
The Jquery table “SampleTableName” is used to show and hide controls in the following examples.
To Remove filter
Filter option in the Jquery table can be removed using the below code.
$('#SampleTableName_filter').css("display", "none");
If the above code is executed, the search textbox will be hidden.
To Remove display length of dropdown
In Jquery table, there is a dropdown which shows maximum records count of the table. The below code remove the display length of dropdown in table.
$('#SampleTableName_length').css("display", "none");
To Remove bottom info text
There is table information which shows how many records bound in table after applying filter. The information can be hidden by using below code.
$('#SampleTableName_info').css("display", "none");
To Remove navigation buttons
Navigation buttons (‘Next’, ‘Previous’, ‘First’ & ‘Last’) can be hidden by using below code.
$('#SampleTableName_next').css("display", "none");
$('#SampleTableName_last').css("display", "none");
$('#SampleTableName_previous').css("display", "none");
$('#SampleTableName_first').css("display", "none");
$('#SampleTableName_search').css("display", "none");
Set Input Mask for Date in Search Textbox of Jquery table
If we want to filter the table records using date, the date input mask can be set in filter search box using below code.
$('# SampleTableName_filter input[type="text"]').datepick({ dateFormat: 'mm/dd/yyyy' });
To remove Toolbar (Top and Bottom) in the Jquery Table
If there are only few records in the table then there is no need of using the Top and Bottom tool bar in the data table. In this condition the tool bar can be removed using below code.
$('#SampleTableName_wrapper .fg-toolbar').css("display", "none");