Unable to make Jquery Data Table responsive
Unable to make Jquery Data Table responsive
beginner_2018
Posts: 46Questions: 19Answers: 0
Dear All,
I am trying to make my Jquery Data table responsive , But I am finding no luck with below code .
Can any one please help me in knowing what's wrong.
$('#tblsuperstore').DataTable({
"lengthMenu": [
[50, 80, 100, -1],
[50, 80, 100, "All"]
],
stateSave: true,
cache: true,
responsive: true,
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
initComplete: function() {
this.api().columns().every(function() {
var column = this;
if (column.index() !== 4 && column.index() !== 5 && column.index() !== 6 && column.index() !== 7 && column.index() !== 10) {
$(column.header()).append("<br>")
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
}
});
}
});
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Hi @beginner_2018 ,
I just tried it here, with your code, and as you can see it's working a treat. Have you include the Response CSS and JS file? See the HTML panel in that example.
Cheers,
Colin
Sir,
Thanks for your kind repose. I combined the code in fiddle from your given location.
Could you please review it ,Because I don't get the result as shown by you
Hi @beginner_2018 ,
Take a look at this one :https://jsfiddle.net/zz3pvx26/1/
The problem was because you had jQuery defined twice, and you weren't using
https. I've fixed both - but note this has the earlier jQuery version, you may wish to change back.Cheers,
Colin
Sir,
I had added the required js scripts with my existing jsscripts .But I am finding no luck in it.
Could you please guide me and let me know is the order in write mode
I had already added in that previous fiddle of mine, but checking it again, it seems to be as it was... Try this one here: https://jsfiddle.net/0otdfutw/