Home/ Questions/Q 7679919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T17:59:24+00:00

I have a simple form with a single button and a datatable with a

  • 0

I have a simple form with a single button and a datatable with a bunch of data. When the user selects one of the options I want the datatable to refresh the data by passing an kwarg – that being value of the selection, which will reduce the data size..

My Question:

How do I use fnServerParams to make this cleaner??

My basic select.

<div class="span-15 last"><select name="customer" id="id_customer">
    <option value="" selected="selected">---------</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="4">C</option>
</select></div>

And the corresponding js.

<link rel="stylesheet" href="{{STATIC_URL}}css/datatable.css" />
<script type="text/javascript" src="{{STATIC_URL}}js/jquery.dataTables.min.js"></script>
<script style="text/javascript">
    $(document).ready(function() {

        $('#data_table').dataTable({
            'sPaginationType':'full_numbers',
            'sDom': '<lf><"clear">rt<"bottom"<"tpad"i<"clear"p>>>',
            "bProcessing": true,
            "sAjaxSource": "{% url incentive_distribution_homes_ajax_list %}"
        });

        $('#id_customer').change(function () {
            var builder_id =  $(this).val();

            //fix this using fnServerParam??

            $('#data_table').dataTable({
                "bDestroy":true,
                'sPaginationType':'full_numbers',
                'sDom': '<lf><"clear">rt<"bottom"<"tpad"i<"clear"p>>>',
                "bProcessing": true,
                "sAjaxSource": "{% url incentive_distribution_homes_ajax_list %}",
                "fnServerData": function ( sSource, aoData, fnCallback ) {
                    $.ajax( {
                            "dataType": 'json',
                            "type":"GET",
                            "url": sSource,
                            "data" : { 'builder_id': builder_id } ,
                            "success": fnCallback
                    })
                }
            });
        });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what I would do:

    I would create another javascript object to act as a listener on #id_customer, configure it such that if the DOM changes, it will call datatables (or the appropriate function therein.)

    From there, to get the data you want passed along to the server, use “fnServerParams”, and extract the value you want to pass along from the DOM.

    Docs are here on that variable, as well as examples:

    http://datatables.net/release-datatables/examples/server_side/custom_vars.html

    Once you pass that along, you will need to catch it on the server side (but not in the URLs, you shouldn’t have to add additional parameters there.) Just look for “fnServerParams” in the request.GET.

    (and for what its worth, you can use django_datables to solve this)

    • 0