How do I search a single column in datatables?

Topic: How do I search a single column in datatables?

launchbrigade priority asked 2 years ago

I would like to search one column, ignoring the other data, but without the user having to enter this in the searchbox (like in the docs)

in:column1,column2

how do i go about hardcoding the column in the search javascript ?

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Just modify the search function:

const search = (value) => {
  const searchValue = value + ' in:your-column-name' //

  let [phrase, columns] = searchValue.split(' in:').map((str) => str.trim());
  columns = columns.split(',').map((str) => str.toLowerCase().trim());

  instance.search(phrase, columns);
};

tmdb priority commented 2 years ago

I just tried using this snippet and it didn't work. Is there something I am missing: Here's the code:

const data = { columns: [ { label: 'Name', field: 'name' }, 'Position', 'Office', 'Age', 'Start date', 'Salary', ], rows: [ ["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"], ["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"], ["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"], ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"], ["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"], ["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"], ["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"], ["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"], ["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"], ["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"], ["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"], ["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"], ["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"], ["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"] ], };

const instance = new mdb.Datatable(document.getElementById('datatable'), data) const advancedSearchInput = document.getElementById('advanced-search-input');

const search = (value) => { const searchValue = value + ' in:Position' //

let [phrase, columns] = searchValue.split(' in:').map((str) => str.trim()); columns = columns.split(',').map((str) => str.toLowerCase().trim());

instance.search(phrase, columns); };

document.getElementById('advanced-search-button').addEventListener('click', (e) => { search(advancedSearchInput.value) });

advancedSearchInput.addEventListener('keydown', (e) => { if (e.keyCode === 13) { search(e.target.value); } })

I just tried using this snippet and it didn't work. Is there something I am missing: Here's the code:

const data = {
 columns: [
 {
 label: 'Name',
 field: 'name'
 },
 'Position',
 'Office',
 'Age',
 'Start date',
 'Salary',
 ],
 rows: [
 ["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],
 ["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
 ["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"],
 ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"],
 ["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
 ["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"],
 ["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"],
 ["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"],
 ["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"],
 ["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"],
 ["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
 ["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"],
 ["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"],
 ["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"]
 ],
};

const instance = new mdb.Datatable(document.getElementById('datatable'), data)
const advancedSearchInput = document.getElementById('advanced-search-input');

const search = (value) => {
 const searchValue = value + ' in:Position' //

let [phrase, columns] = searchValue.split(' in:').map((str) => str.trim());
 columns = columns.split(',').map((str) => str.toLowerCase().trim());

instance.search(phrase, columns);
};

document.getElementById('advanced-search-button').addEventListener('click', (e) => {
 search(advancedSearchInput.value)
});

advancedSearchInput.addEventListener('keydown', (e) => {
 if (e.keyCode === 13) {
 search(e.target.value);
 }
})

Please insert min. 15 characters.

Grzegorz Bujański staff commented 2 years ago

Unfortunately I am not able to reproduce it. Please create a snippet and let me know what exactly does not work.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 3.9.0
Device: Macbook Pro
Browser: Chrome
OS: Monterey
Provided sample code: No
Provided link: No

launchbrigade

64Support score
9Questions 3Answers 0Snippets