ServerSide Processing + DropdownList Filters + Responsive ¿How to do it?

jmoseton

Hello,

before start please excuse me if you found the following post first and i'm repeating it now because i'm new here and i didn't know how to ask properly, please ignore it (i don't know how to delete it)
https://datatables.net/forums/discussion/56458/server-side-processing-dropdownlist-header-filters-resposive-how-to-do-it#latest

so go ahead !

i've been working with simples dataTables few weeks ago and it was easy, but some days ago my client request dropdownList filters in headers keeping the responsive functionality and using Server side processing because the table is receiving too many records and the rendering takes too much time, while i've been looking for the best approach to do it i faced two scenaries that are driving me crazy

my goal is create the dropdownList filters using the same JSON data received by AJAX and keep the resposive functionality of course.

FIRST. an HTML table with dropdownList inside each th, and normal serverside processing initialise, please check the example and the results description at the end.

HTML

<table id="myTable">
<thead>
<tr>
<th>col01@Html.DropDownList("col01", new SelectList(ViewBag.col01, "valueData", "textData", ""))</th>
<th>col02@Html.DropDownList("col02", new SelectList(ViewBag.col02, "valueData", "textData", ""))</th>
<th>col03@Html.DropDownList("col03", new SelectList(ViewBag.col03, "valueData", "textData", ""))</th>
<th>col04@Html.DropDownList("col04", new SelectList(ViewBag.col04, "valueData", "textData", ""))</th>
<th>col05@Html.DropDownList("col05", new SelectList(ViewBag.col05, "valueData", "textData", ""))</th>
<th>col06@Html.DropDownList("col06", new SelectList(ViewBag.col06, "valueData", "textData", ""))</th>
<th>col07@Html.DropDownList("col07", new SelectList(ViewBag.col07, "valueData", "textData", ""))</th>
<th>col08@Html.DropDownList("col08", new SelectList(ViewBag.col08, "valueData", "textData", ""))</th>
<th>col09@Html.DropDownList("col09", new SelectList(ViewBag.col09, "valueData", "textData", ""))</th>
<th>col10@Html.DropDownList("col10", new SelectList(ViewBag.col10, "valueData", "textData", ""))</th>
</tr>
</thead>
</table>

---

SCRIPT

dt= $("#myTable").DataTable({
 serverSide: 'true',
order: [1, 'desc'],
processing: 'true',
responsive: true,
ajax: {
            'url': .............. //some route to an JsonResult,
            'type': 'POST',
            'datatype': 'json'
},
columns: .............
language: ......................
});

---

RESULTS: it works pretty fine, i have all my data on table and dropdown filters in headers, also the resposive works perfect, when i open the (+) button to display the hidden columns my dropdownList are there and working but as i told you at the beginning is not the goal but it is important to know that is posible to get those kind of filters and responsive datatable.

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

SECOND. an HTML table without dropdownList inside each th, and serverside processing initialise with functions to append into each th the required dropdownlList filter, please check the example and the results description at the end.

HTML

<table id="myTable">
<thead>
<tr>
<th>col01</th>
<th>col02</th>
<th>col03</th>
<th>col04</th>
<th>col05</th>
<th>col06</th>
<th>col07</th>
<th>col08</th>
<th>col09</th>
<th>col10</th>
</tr>
</thead>
</table>

---

SCRIPT

dt= $("#myTable").DataTable({
 serverSide: 'true',
order: [1, 'desc'],
processing: 'true',
responsive: true,
ajax: {
            'url': .............. //some route to an JsonResult,
            'type': 'POST',
            'datatype': 'json'
},
columns: .............
language: ......................
fnInitComplete: function (oSettings, json) {
            addSearchControl(json.dropdownlists);
        }
});

function addSearchControl(_json) {

$('#myTable tr th').each(function (index, item) {
var optionList = [];

$(_json[index]).each(function (index, element) {
optionList.push('<option value="' + element + '">' + element + '</option>');
 });

$(this).append('<select><option value="" selected>.:: Select ::.</option>' +  optionList.join("\n") +'</select>');
});

$(document).on('change', '#myTable tr th select', function () {
      dt.column(0).search($(this).val()).draw();
})

}

---

JSONRESULT - CONTROLLER

public JsonResult getList()
{
Object[] ddl = new Object[9]; // Objects array for dropdownLists filters in datatable headers
..
....
......  //code and more code
.............
..................

return Json(new { data = model, draw = Request["draw"], recordsTotal = totalRows, recordsFiltered = totalRowsAfterFiltering, dropdownlists = ddl}, JsonRequestBehavior.AllowGet);

}

---

RESULTS: it works pretty fine, i have all my data on table and dropdown filters in headers, but the resposive doesn't works, when i open the (+) button to display the hidden columns my dropdownList filters has been disappear.

in the 1st scenario the responsive works but the filters must to be created in the HTML before the Datatables plugin initialization.

in the 2nd scenario the responsive doesn't work for hidden columns(and dropdownList filters) but i can create them using the AJAX response.

i'll appreciate your kind help to make this work.

Thanks

allan

For drop down column filters to be responsive, I would suggest not putting them in the column headers at all. Put them in a filtering panel above, to the side or below the table.

Consider for example, what do you want the UX to be if a user were to have a hidden column but wants to filter on it. They open the details row and can filter on it there? What if they have two details rows displayed? Then they'd have two filtering components for that same column? To my mind, you might be trying to solve the wrong problem here .

Allan