fetching the values from ofcolumn filter in jquery data tables

Question

I am using jquery data tables in my application and using the server side processing for pagination and exporting the data as CSV.

      $(function  (){
            $('#dataTable-my tfoot th').each( function (index) {
                var title = $('#dataTable-my thead th').eq( $(this).index() ).text();
                  $(this).html( '<input type="text" placeholder="Filter" class="form-control input-sm ng-pristine ng-valid" size="10"/>' );
            });
            var table = $('#dataTable-my').DataTable( {
                "jQueryUI": true,
                "dom": 'T<"clear">lfrtip',
                "sPaginationType": "full_numbers",
                "bServerSide": true,
                "sAjaxSource": HOST_URL+"/students/",
                "sServerMethod": "GET",
                "bFilter": true,
                "oSearch": {"bRegex":true, "bSmart": false},
                "oTableTools": {
                    "aButtons": [
                        {
                            "sExtends": "ajax",
                            "sButtonText":"Save as CSV",
                            "sToolTip": "Save as CSV",
                            "sButtonClass": "my_button_class",
                            "fnClick": function () {
                                var ajaxUrl=HOST_URL+"/students/?export=true";
                                var searchKeyword=table.search( this.value);
                                if (searchKeyword){
                                    ajaxUrl=ajaxUrl.concat("&sSearch="+searchKeyword);
                                }
                                var iframe = document.createElement('iframe');
                                iframe.style.height = "0px";
                                iframe.style.width = "0px";
                                iframe.src = ajaxUrl;
                                document.body.appendChild( iframe );
                            }
                        }
                    ]
                },
                initComplete: function ()
                {
                    var r = $('#dataTable-my tfoot tr');
                    r.find('th').each(function(){
                        $(this).css('padding', 8);
                    });
                    $('#dataTable-my thead').append(r);
                    $('#search_0').css('text-align', 'center');
                },
                "bAutoWidth": false,
                "aoColumns": [
                    { "mData": "name" },
                    { "mData": "age" },
                    { "mData": "location" }
                ]
            })
            $('#dataTable-my').DataTable();
            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );
        });

The above code overrides the export feature and passes the value from the global search as a parameter. Now since my data table has multi column filtering enabled, I need to also pass in the keywords typed inside the column as request parameters.

How to fetch the values typed inside the column filter inside the fnClick method which I can pass a request parameters when making ajax call.

I tried using the table.row(0).data() but I get the row values and not the columns values.

Please let me know where I am going wrong.

Regards, Pradeep

Answer 1

I used the below code to fetch the column values and form the url.

                         "fnClick": function () {
                                var ajaxUrl=HOST_URL+"/students/?export=true";
                                var searchKeyword=table.search( this.value);
                                if (searchKeyword){
                                    ajaxUrl=ajaxUrl.concat("&sSearch="+searchKeyword);
                                }
                                //append the search keywords from the individual columns..
                                for (var index = 0; index < 8; index++ ) {
                                    ajaxUrl = ajaxUrl.concat("&sSearch_"+index+"=" + (table.column( index ).search( this.value ) || ''));
                                }

                                var iframe = document.createElement('iframe');
                                iframe.style.height = "0px";
                                iframe.style.width = "0px";
                                iframe.src = ajaxUrl;
                                document.body.appendChild( iframe );
                            }

The rest of the code remains the same. In specific the below code can be used to fetch the column details:

table.column( index ).search( this.value )