How to Search in Data Table after Page Refresh using set Interval

avijit123

I am using Data Table and Searching and Filtering Data using Drop Down select tag and input search field.My select tags are column wise like...Trip Id,Status,Pick up timing etc.My search code is

...api().columns().every (i) ->
  column = this
  col_title_array = ["Actions", "Trip ID", "PIN", "Last Seen At", ""]
  col_header = column.header()
  col_title = $(col_header).text().trim()
  unless col_title in col_title_array
    select = $('<select class="col_filter" id="col_filter'+col_title+'"><option value="">Select '+col_title+'</option></select>').appendTo( $('.fg-toolbar')).on('change', ->
      #val = $.fn.dataTable.util.escapeRegex($(this).val())
      val = column.search($(this).val()).draw()
      return
    )
    column.data().unique().sort().each (d, j) ->
      select.append '<option value="' + d + '">' + d + '</option>'
      return
  return

its works for me when first select option or search.But After Ajax call when the page reload its doesn't work.The index.js.erb containts the javascript code.

...api().columns().every(function(i) {
  var col_header, col_title, col_title_array, column, select, val;
  column = this;
  col_title_array = ["Actions", "Trip ID", "PIN", "Last Seen At", ""];
  col_header = column.header();
  col_title = $(col_header).text().trim();
  <% if @selected %>
    <% @selected.each do |s| %>
      var search = '<%=raw s%>'
      val = $.fn.dataTable.util.escapeRegex(search);
      column.search(val, true, false).draw();
   <% end %>
 <% end %>
<% if @search %>
   var search = '<%= raw @search %>'
   $("input[type='search']").val(search);
   val = $.fn.dataTable.util.escapeRegex(search);
   column.search(if val then '^' + val + '$' else '', true,     false).draw();
  <% end %>
    if (indexOf.call(col_title_array, col_title) < 0) {
       select = $('<select class="col_filter"     id="col_filter'+col_title+'"><option value="">Select ' + col_title + '</option></select>').appendTo($('.fg-toolbar')).on('change', function() {
  column.search($(this).val()).draw();
});
   column.data().unique().sort().each(function(d, j) {
     select.append('<option value="' + d + '">' + d + '</option>');
  });
}
 });

but I don't get any rows.In this code @selected is whatever I selected from option field before refresh the page and ajax call,then I search the data but its not working properly.same like for search box.

And I also want to Filter the Data by Pick up Timing Date Range.Please suggest me the both of the case.

allan

Hi,

This tech note details how you can use code highlighting in your forum posts to make them readable :-)

I looks like you are mixing server-side code with client-side code in the every function. Are you able to change that so it operates on the client-side data only. That would be my first suggestion. Beyond that, we would need a link to the page, as required in the forum rules, to be able to offer any further help.

Allan