Unable to make Jquery Data Table responsive

beginner_2018

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>')
          });
        }
      });
    }
  });

colin

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

beginner_2018

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

colin

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

beginner_2018

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

colin

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/