$.fn.dataTableExt.afnFiltering.push not working accordingly

letswebtech

have triggered the fnDraw() function but its not working . i am getting console error that " table_name.fnDraw is not a function(…) " . i am using daterange filter to sort my datatable using adminlte's datatable library .

1. <script type="text/javascript">
2. var save_method; //for save method string
3. var table_medicine;
4. 
5. $('#myInput').on( 'keyup', function () {
6.     table_medicine.search( this.value ).draw();
7. } );
8. 
9.  $.fn.dataTableExt.afnFiltering.push(
10.     function( oSettings, aData, iDataIndex ) {
11. 
12.     alert('Not Reaching here');               
13. 
14.     var filterstart = $("#dateStart").val();
15.     var filterend = $("#dateend").val();
16.     var iStartDateCol = 3; //using column 2 in this instance
17.     var iEndDateCol = 3;
18.     var tabledatestart = aData[iStartDateCol];
19.     var tabledateend= aData[iEndDateCol];
20.     
21.     if ( !filterstart && !filterend )
22.     {
23.         return true;
24.     }
25.     else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
26.     {
27.         return true;
28.     }
29.     else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
30.     {
31.         return true;
32.     }
33.     else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
34.     {
35.         return true;
36.     }
37.     return false;
38. }
39. );
40.     
41. 
42. $(document).ready(function() {
43. 
44.     //datatables account
45.    var  table_account = $('#table_account').DataTable({ 
46. 
47.         "processing": true, //Feature control the processing indicator.
48.         "serverSide": true, //Feature control DataTables' server-side processing mode.
49.         "order": [], //Initial no order.
50. 
51.         // Load data for the table's content from an Ajax source
52.         "ajax": {
53.             "url": "<?php echo site_url('PharmacyController/ajax_list_account')?>",
54.             "type": "POST"
55.         },
56. 
57.         //Set column definition initialisation properties.
58.         "columnDefs": [
59.         { 
60.             "targets": [ -1 ], //last column
61.             "orderable": false, //set not orderable
62.         },
63.         ],
64. 
65.     });
66.     $('#dateStart').change( function() {    alert('Working Here');    table_account.fnDraw(); alert(' Not Working Here');  } );
67.     $('#dateend').change( function() {  alert('Working Here');  table_account.fnDraw(); alert(' Not Working Here'); } );
68.     $('#dateStart').keyup( function() { alert('Working Here');  table_account.fnDraw();  alert(' Not Working Here');} );
69.     $('#dateend').keyup( function() { alert('Working Here');  table_account.fnDraw(); alert(' Not Working Here'); } );
70.     
71.     //datepicker
72.     $('.datepicker').datepicker({
73.         autoclose: true,
74.         format: "dd-mm-yyyy",
75.         todayHighlight: true,
76.         orientation: "top auto",
77.         todayBtn: true,
78.         todayHighlight: true,  
79.     });
80.     //Date range picker
81.     $('.daterange').daterangepicker();
82.     
83.     //set input/textarea/select event when change value, remove class error and remove text help block 
84.     $("input").change(function(){
85.         $(this).parent().parent().removeClass('has-error');
86.         $(this).next().empty();
87.     });
88.     $("textarea").change(function(){
89.         $(this).parent().parent().removeClass('has-error');
90.         $(this).next().empty();
91.     });
92.     $("select").change(function(){
93.         $(this).parent().parent().removeClass('has-error');
94.         $(this).next().empty();
95.     });
96. 
97. });
98. 
99. function reload_table()
100. {
101.     table_medicine.ajax.reload(null,false); //reload datatable ajax 
102.     table_medicine_available.ajax.reload(null,false); //reload datatable ajax 
103.     table_pos.ajax.reload(null,false); //reload datatable ajax 
104.    
105. }
106. </script>

allan

Use draw(). fnDraw is a legacy method.

Allan

letswebtech

Thank you Allan for your reply .

My console error have remove by using your Answer . But still its not triggering "$.fn.dataTableExt.afnFiltering.push" . alert() on line no. 12 is not triggering . and the table get refreshed but sorting is not done (table doesn't changed as expected)

Regards
Kashif Ahmed

allan

I missed that you have:

"serverSide": true,

With server-side processing all of the filtering is done at the server-side. So client-side filters are irrelevent and will never be run.

Allan

letswebtech

Allan , I am new to datatables , i would like to know what is the solution to implement client side filters , i have done
"serverSide": false, . it's still not working out for me .

Thanks for your response

allan

I would need a link to a test page showing the issue. This page shows a custom filter working.

Allan