datatables custom filter not search

Question

I currently have custom filter buttons that use the search API function of the database.

HTML

  <ul>
                    <li class="btn"><a href="#" data-type="all">All</a></li>
                    <li class="btn"><a href="#" data-type="video">Video</a></li>
                    <li class="btn"><a href="#" data-type="image">Image</a></li>
                    <li class="btn"><a href="#" data-type="upload">Upload Dash</a></li>
                    <li class="btn"><a href="#" data-type="link">Code Link</a></li>
                  </ul>

JQuery

 var table = $('#rlist').dataTable( {
        "processing": true,
        "serverSide": true,
        "order": [[ 0, "asc" ]],
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'T <'clearfix'>f>r>t<'row'<'col-sm-5'i><'col-sm-7'p>>",
        "sPaginationType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "ajax": baseurl+"media/ajax_fetch"       

    });

    $('ul').on('click', 'a', function() {

          table
            .columns(1)
            .search($(this).text())
            .draw();
        });

        $('ul').on('click', 'a.all', function() {

          table
            .search('')
            .columns(1)
            .search('')
            .draw();
        });

The problem is I don't want to use the search API, I want to send the button data-type attribute to the server side where I can manipulate manually not interfering with the search function.

How do I do this?

Rich · Accepted Answer · 2018-09-24 14:54:17Z

1

I use a similar functionality with my current project. Basically, you need to modify your click events to take the element's data-type attribute, call an ajax with that data, then clear the table and add the new searched data.

You will need to clear the client side table everytime you search doing it through this approach though.

$('ul').on('click', 'a', function() {
  var elementType = $(this).attr("data-type");
  $.ajax({
    type: "POST",
    //assuming server url is something like '/someURL/{elementType}'
    url: urlToServer + elementType, 
    success: function(response) {
      if (response) {
        table.clear().rows.add(response).draw();
      }
      //no data back from server
      else table.clear();
    }
  });
});

answered Sep 24, 2018 at 14:54

Rich

1,65515 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user892134 Over a year ago

Thanks, I have pagination set up, does this update pagination? For example if the filter has 20 total results but i'm only showing 10 per page? Will datatables update pagination?

Rich Over a year ago

If you use .clear() as I suggest, any settings you set during datatables initialization will be retained. This includes things like rendering functions, pagination settings, sorting settings, etc.

Collectives™ on Stack Overflow

datatables custom filter not search

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related