Datatables Scripts not working at same time

khubab

Following is my script code of three function on single table. Problem is that they works fine seprately, But at the same time not works. What i am doing wrong

     //daterange picker and filter both
        var oTable;
          $(document).ready(function () {
            'use strict';
        var datepickerDefaults = {
            showTodayButton: true,
            showClear: true
        };
      $('#example').dataTable().yadcf([
            {column_number: 12, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'DD-MMM-YY', filter_plugin_options: datepickerDefaults}
        ]);
            SyntaxHighlighter.all();
        });

          //datatable 

$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: ['excel'],
lengthChange: true,
paging: false,
scrollY: 535,
scrollX: false,
sScrollXInner: "190%" ,

         "oLanguage": { "sSearch": "Search" } ,
         "columnDefs": [

         { "sClass": "datecol", "aTargets": [ 12 ] },
         {  "orderable": false,  "aTargets": [ 13 ] },
         {  "orderable": false, "aTargets": [ 14 ] },
         {  "orderable": false, "aTargets": [ 15 ] },

         ],

         "order": [[ 12, "desc" ]],

        initComplete: function () {
          this.api().columns().every( function (currentValue) {     
            if (currentValue !== 15 & currentValue !== 14 & currentValue !== 13 ) {         
              var column = this;
              var select = $('<select><option value=""></option></select>')
               .css('width',60)
               .appendTo( $(column.footer()).empty() )
               .on( 'change', function () {
                  var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                  );
                 column
                  .search( val ? '^'+val+'$' : '', true, false )
                  .draw();
                 } );
                column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
                 });
               } 
              });
             }   
         });
     });

         // Clear filtered data
        $.extend( $.fn.dataTable.defaults, {
        fnInitComplete: function(oSettings, json) {
        // Add "Clear Filter" button to Filter
          var btnClear = $('<button class="btnClearDataTableFilter">clear</button>');
          btnClear.appendTo($('#' + oSettings.sTableId).parents('.dataTables_wrapper').find('.dataTables_filter'));
          $('#' + oSettings.sTableId + '_wrapper .btnClearDataTableFilter').click(function () {
          $('#' + oSettings.sTableId).dataTable().fnFilter('');
         });
        } 
      });

kthorngren

three function on single table. Problem is that they works fine seprately, But at the same time not works

Can you provide more details of what is not working correctly?

One problem may be that you are using initComplete in the Datatables init code and

$.extend( $.fn.dataTable.defaults, {
   fnInitComplete: function(oSettings, json) {

I suspect one overwrites the other. I would recommend combining them into one function.

Please put together a test case showing the issue with a description of what is not working and what you expect.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin