Home / Datatables / Javascript / Jquery

Column Visibility With Custom Search Fields

December 18, 2023 Post a Comment

I am trying to create a datatable with custom search and column visibility. What I have done is - HTML

Solution 1:

SOLUTION

You're using two thead elements, make it one with two rows instead as shown below.

<thead><tr><th>Employee name</th><th>Salary</th><th>Position</th><th>City</th><th>Extension</th><th>Joining date</th><th>Age</th></tr><tr><td><inputtype="text"id="0"class="employee-search-input"></td><td><inputtype="text"id="1"class="employee-search-input"></td><td><inputtype="text"id="2"class="employee-search-input" ></td><td><inputtype="text"id="3"class="employee-search-input" ></td><td><inputtype="text"id="4"class="employee-search-input" ></td><tdvalign="middle"><inputreadonly="readonly"type="text"id="5"class="employee-search-input datepicker" ></td><td><inputtype="text"id="6"class="employee-search-input" ></td></tr></thead>

Also in this case you need to use orderCellsTop: true option to tell DataTables to use top row for sorting.

DEMO

See this jsFiddle for code and demonstration.

Baca Juga

Post a Comment for "Column Visibility With Custom Search Fields"

Has A Class, Add Class To Table Cell

Let's say I have the following html: …

WebRTC Video Constraints Not Working

I'm trying to get a lower resolution from the webcam na…

HasClass Doesn't Work In My Js Code?

I want to use hasClass in the following code, but that does…

Capturing .click For URLs

I am relatively new to Javascript/Ajax. When the user click…

Highcharts Donutchart: Avoid Showing Duplicate Legend With Nested Charts

I am trying to represent nested data using Highcharts Donut…

How Do I Use Data From Vue.js Child Component Within Parent Component?

I have a form component where I use a child component. I wa…

Logic For The Next Button For The Questionnaire?

I am beginner in AngularJS and facing some issues. I am try…

Assignment To Property Of Function Parameter (no-param-reassign)

I have this function and while I have this working nicely, …

Payload Error In Jsonwebtoken

I am making a web application using nodejs and angular cli …

How To Show Website Preloader Only Once

I added a preloader to my website and the preloader animati…