DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Build a Dropdown list from column Header

Build a Dropdown list from column Header

NJDave71NJDave71 Posts: 40Questions: 3Answers: 0
in Free community support

I am building a custom search tool that requires a drop down list derived from the visible Column Headers. the data is com,in from the server so i am using sName. I ran a test to see what lives inside the aoColumns.

var table = $('#mytable').DataTable();
'var columns = table.context[0].aoColumns;
var columnslen = table.context[0].aoColumns.length;
console.dir(table.context[0])
for (var i = 0; i < columnslen; i++) {
console.log(columns[i].sName + ' : '+ columns[i].bVisible );

}

has anyone done this. and have a suggestion

Replies

  • NJDave71NJDave71 Posts: 40Questions: 3Answers: 0

    [Resolved]

  • him.bhatia1234him.bhatia1234 Posts: 1Questions: 0Answers: 0

    Can you please share how you are able to do it?

  • NJDave71NJDave71 Posts: 40Questions: 3Answers: 0

    I am still working on this but this should give you an idea.

    var table = $('#mydt').DataTable();
var columns = table.context[0].aoColumns;
var columnslen = table.context[0].aoColumns.length;

var selectList = '<select id="myselect">';
for (var i = 0; i < columnslen; i++) {
     if (columns[i].bSearchable === true ) {
      selectList += "<option value=" + columns[i].sName + ">" + columns[i].name + "</option>";
     }
}
selectList += "</select>";
$('.container').append(selectList);

    sample
    ...
    "aoColumnDefs": [
    { "aTargets": [0], "bVisible": true, "bSearchable": true, "sName": "First_Name", "name": "First Name" },
    ...

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.