CODEWITHSUNDEEP
jqueryhtmldatatableslaravel-5
Vijay Sebastian
Vijay Sebastian

Reputation: 1204

jQuery Datatable adding parameters to url

I have created a datatable, I want to add filter option to url, here is my code

jQuery(document).ready(function() {
 oTable = jQuery('#vV7SyzDr').dataTable({
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "sAjaxSource": "my_url",
    "bServerSide": true,
    "fnServerParams":function ( aoData ) {
        $("select[name=label]").change(function () {
           var labels = $("select[name=label]").val();
           aoData.push({"labels": labels } ); 
        });       
     },
  });

  $("select[name=label]").change(function () {
      oTable.fnDraw();
    });
  });

But the url is not triggered with parameter labels. I have a multiple select box to filter the table.

<select class="tagit-hiddenSelect" name="label" multiple="multiple">
    <option selected="selected" value="Important">Important</option>
    <option selected="selected" value="Bug">Bug</option>
</select>

I am trying to add the selected labels to my_url in sAjaxSource, and backed I should get labels and return json response, That will render in my datatable with new data from backend.

Now My url is 

http://my_domain/filter?sEcho=1&iColumns=7&sColumns=%2C%2C%2C%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=1

I want to add parameter label to my url. Ideally it should be

http://my_domain/filter?sEcho=1&iColumns=7&sColumns=%2C%2C%2C%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=1&label=['important','bug'] (['important','bug'] means value in array type).

Please help me, I am a beginner in front end

Upvotes: 0

Views: 1541

Answers (1)

markpsmith
markpsmith

Reputation: 4918

I think I understand what you're trying to do, and you've almost got it right - it looks like you've just got the change event in the wrong place. Your datatables initialisation code should look like this:

oTable = jQuery('#vV7SyzDr').dataTable({
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "sAjaxSource": "my_url",
    "bServerSide": true,
    "fnServerParams": function(aoData) {
        aoData.push({"labels": $("select[name=label]").val() });
      });
    }
  });

Note: All I have done is remove the change event binding.

Now you need to bind the datatables fnDraw to the selectlist change event. This is not part of the datatables init code, so put it elsewhere in the js :

$("select[name=label]").change(function() {
    oTable.fnDraw();
});

fnDraw will redraw the datatable by calling your ajax service, passing the additional parameter specified in fnServerParams.

Upvotes: 2

Related Questions