Server Side Processing + DropdownList Header filters + Resposive ¿How to do it?

jmoseton

Hello,

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.

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

col01@Html.DropDownList("col01", new SelectList(ViewBag.col01, "valueData", "textData", ""))	col02@Html.DropDownList("col02", new SelectList(ViewBag.col02, "valueData", "textData", ""))	col03@Html.DropDownList("col03", new SelectList(ViewBag.col03, "valueData", "textData", ""))	col04@Html.DropDownList("col04", new SelectList(ViewBag.col04, "valueData", "textData", ""))	col05@Html.DropDownList("col05", new SelectList(ViewBag.col05, "valueData", "textData", ""))	col06@Html.DropDownList("col06", new SelectList(ViewBag.col06, "valueData", "textData", ""))	col07@Html.DropDownList("col07", new SelectList(ViewBag.col07, "valueData", "textData", ""))	col08@Html.DropDownList("col08", new SelectList(ViewBag.col08, "valueData", "textData", ""))	col09@Html.DropDownList("col09", new SelectList(ViewBag.col09, "valueData", "textData", ""))	col10@Html.DropDownList("col10", new SelectList(ViewBag.col10, "valueData", "textData", ""))

---

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.

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

1. 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.

col01	col02	col03	col04	col05	col06	col07	col08	col09	col10

---

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('' + element + ''); }); $(this).append('.:: Select ::.' + optionList.join("\n") +''); }); $(document).on('change', '#myTable tr th select', function () { dt.column(0).search($(this).val()).draw(); }) }

---

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

colin

duplicate of this thread: https://datatables.net/forums/discussion/56459/serverside-processing-dropdownlist-filters-responsive-how-to-do-it#latest