Skip to main content

Posts

Showing posts with the label jquery datatable

Datatable Change or remove search box label text

Datatable Change or remove search box label text Datatable is a jQuery plugin which converts a simple html table to a dynamic table with advance functionality like searching , sorting, pagination etc. By default datatable show a search box to filter records based on the column values that match with the search input box value and its have a label with "Search" text. So today we will learn how to remove datatable search input box label or change text to any text. 1. Remove/Delete Text of datatable search box label  To remove "Search" text from label , you need to pass language parameter with datatable initialization like below code. Example Code: var table = $('#datatableId').DataTable( {     language: { search: "" }, }); 2. Change/Modify Text of datatable search box label To modify text or replace with custom text you need to pass value of language.search object to your text like below code. Example Code: var table = $('# datatableId ').Da...
Post a Comment
Read more

jQuery Datatable add date range filter

jQuery Datatable add date range filter Datatable is most useful jQuery plugin that helps to make our html tables more powerful and give powers to user to filter , search, sort, pagination etc, But Data table provides a common filter only and yes we can customize and add filter for each column, but still sometimes we need an advance filter like show results only between a date range, So today we will learn how to create a minimum and maximum date range fields and show date picker on it, and user can fill dates by selecting dates and data table will auto filter records based on it. Keep follow below steps :- I am using Bootstrap if you want to use any other framework then you can use. Create a new index.php file  and paste below code in it, i have used all required CDN like bootstrap, datatable, datepicker etc. <!DOCTYPE html> <html> <head>     <title>Datatable Date Range Filter Example</title>     <link rel="stylesheet" ...
Post a Comment
Read more

jQuery Datatable disable sorting for one column or multiple column

jQuery Datatable disable sorting for one column Sometimes we want to remove sorting in datatable so today we will learn how to disable sorting for any specific column in simple steps. jQuery datatable provides columnDefs option that we can use to remove sorting (asc/desc) from any column . Please use below code:   var oTable= $('#idDataTable').DataTable({               "order": [[ 3, "asc" ]],               'columnDefs': [{                     "targets": [0],                     "orderable": false                 }]           }); So in ...
4 comments
Read more