Add search boxes to datatable.

classic12 · November 2017

I have tried loads of different ways to get this to work.

I am using this link

https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

What is the correct syntax to get this working please?

Cheers

Steve Warby

var editor; // use a global for the submit and return data rendering in the examples
var selectedQuoteID;
var table;
// add filter boxes

btnGetData.onclick=function(){
    
        $("#DataTable1").dataTable().fnDestroy(); 
        $('#DataTable1').empty();
        

     table = $('#DataTable1').DataTable( {
        
        "order": [[0, 'desc']],
        dom: "Bfrtip",
        autoWidth : true,
        responsive: true,
        ajax: "http://toolfolks.com/surplusAdmin3/php/upload-many.php",
        columns: [
            { data: "quotes.quoteID" , width : '25px', title : 'Quote No'},
            { data: "quotes.custID" , width : '25px', title : 'Cust No'},
            { data: "quotes.quoteDate" , width : '25px',  title : ' Date'},
            { data: "quotes.quoteTitle" , width : '150px',  title : ' Title'},
            { data: "quotes.notes" , width : '150px',  title : ' Notes'},
            { data: "quotes.notesInternal" , width : '150px',  title : ' Notes Internal'},
            { data: "sites.name" },
            {
                data: "files",
                render: function ( d ) {
                    return d.length ?
                        d.length+' image(s)' :
                        'No image';
                },
                title: "Image"
            }
        ],
        select: true
        
    } );
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
};

btnAddSearch.onclick=function(){
        
        $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } ); 
    //var table2 = $('#DataTable1').DataTable();
      
    
 
    
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

}

classic12 · November 2017

I have also added

        $('#DataTable1_search').on( 'keyup', function () {
    table
        .columns(6)
        .search( this.value )
        .draw();
} );

The filter works but only on the notes column no matter what value I put in .columns(6)

here www.toolfolks.com/surplusAdmin4

click getData

Cheers

Steve Warby

classic12 · November 2017

I'm struggling here guys.

I have also tried to use the CKEditor plugin but no errors in the console but it just does not show up.

The only things I can think of is

I am using NSBasic where I drag a datatable component onto the form. I then have to use:

         $("#dtQuoteDetails").dataTable().fnDestroy(); 
         $('#dtQuoteDetails').empty();

otherwise I get an error stating I can't re-initialise the datatable.
Could this be 'killing' the additional code ( out of my depth here)

in the IDE you drag & drop the css & js files.
So maybe I don't have them in the correct order ( image shown).

www.toolfolks.com/surplusAdmin6CKEditor/Screen Shot 2017-11-11 at 18.23.30.png

Other than that I'm at a loss.

www.toolfolks.com/surplusAdmin6CKEditor

//version 6 adding CKEditor
//https://editor.datatables.net/plug-ins/field-type/editor.ckeditor

var editorQuoteDetails;
var selectedQuoteDetail;
  $('table').after(' ');

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
'use strict';
 
 
if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
 
var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;
 
 
_fieldTypes.ckeditor = {
    create: function ( conf ) {
        var that = this;
        var id = DataTable.Editor.safeId( conf.id );
 
        conf._input = $('<div><textarea id="'+id+'"></textarea></div>');
 
        // CKEditor needs to be initialised on each open call
        this.on( 'open.ckEditInit-'+id, function () {
            if ( $('#'+id).length ) {
                conf._editor = CKEDITOR.replace( id, conf.opts );
                conf._editor.on( 'instanceReady', function () {
                    // If shown in a bubble, there is a good chance we'll need to
                    // move it once CKEditor is shown, since it is large!
                    if ( conf._input.parents('div.DTE_Bubble').length ) {
                        that.bubblePosition();
                    }
                } );
 
                if ( conf._initSetVal ) {
                    conf._editor.setData( conf._initSetVal );
                    conf._initSetVal = null;
                }
                else {
                    conf._editor.setData( '' );
                }
            }
        } );
 
        // And destroyed on each close, so it can be re-initialised on reopen
        this.on( 'preClose.ckEditInit-'+id, function () {
            if ( conf._editor ) {
                conf._editor.destroy();
                conf._editor = null;
            }
        } );
 
        return conf._input;
    },
 
    get: function ( conf ) {
        if ( ! conf._editor ) {
            return conf._initSetVal;
        }
 
        return conf._editor.getData();
    },
 
    set: function ( conf, val ) {
        var id = DataTable.Editor.safeId( conf.id );
 
        // If not ready, then store the value to use when the onOpen event fires
        if ( ! conf._editor || ! $('#'+id).length ) {
            conf._initSetVal = val;
            return;
        }
        conf._editor.setData( val );
    },
 
    enable: function ( conf ) {}, // not supported in CKEditor
 
    disable: function ( conf ) {}, // not supported in CKEditor
 
    destroy: function ( conf ) {
        var id = DataTable.Editor.safeId( conf.id );
 
        this.off( 'open.ckEditInit-'+id );
        this.off( 'preClose.ckEditInit-'+id );
    }
};
 
 
}));

btnGetQuoteDetails.onclick=function(){
      editorQuoteDetails = new $.fn.dataTable.Editor( {
        ajax: "http://toolfolks.com/surplusAdmin3/php/staff.php",
        table: "#dtQuoteDetails",
        fields: [ {
                label: "Line ID:",
                name: "lineID"
            },{
                label: "Quote ID:",
                name: "quoteID"
            },{
                label: "Quantity:",
                name: "quantity"
            }, {
                label: "Stock Code:",
                name: "stockCode"
            }, {
                label: "Description:",
                name: "description"
            },{
                label: "Cost :",
                name: "costPrice",
              },{
                label: "Sell:",
                name: "sellPrice",
              },{
                label: "Line Total:",
                name: "lineTotal",
              },{
                label: "VAT Rate:",
                name: "vatRate",
              },{
                label: "Line Total Nett:",
                name: "lineTotalNett",
              }
            

        ]
        

    } );
    
      editorQuoteDetails.on( 'create', function ( e, type ) {
     // Type is 'main', 'bubble' or 'inline'
     alert( 'new row created' );
} );
    editorQuoteDetails.on('initEdit', function () {

            editorQuoteDetails.disable(["lineID"]);
        });
        
// set the datatables up..........................................

         $("#dtQuoteDetails").dataTable().fnDestroy(); 
        $('#dtQuoteDetails').empty();
    var table = $('#dtQuoteDetails').DataTable( {


        "order": [[0, 'desc']],
        dom: "Bfrtip",
        autoWidth : true,
        responsive: true,
        ajax: "http://toolfolks.com/surplusAdmin3/php/staff.php",
               columns: [
            { data: "lineID" , width : '25px', title : 'Line ID'},
            { data: "quoteID" , width : '25px', title : 'Quote ID'},
            { data: "quantity" , width : '25px',  title : ' Quant'},
            { data: "stockCode" , width : '150px',  title : ' stockCode'},
            { data: "description" , width : '150px',  title : ' Description', type: 'ckeditor'},
            { data: "costPrice" , width : '150px',  title : ' Cost Price'},
            { data: "sellPrice" , width : '150px',  title : ' Sell Price'},
            { data: "lineTotal" , width : '150px',  title : ' Line Total'},
            { data: "vatRate" , width : '150px',  title : ' VAT Rate'},
            { data: "lineTotalNett" , width : '150px',  title : ' Line Tot Nett'}

        ],
        select: true,
        buttons: [
            { extend: "create", editor: editorQuoteDetails },
            { extend: "edit",   editor: editorQuoteDetails },
            { extend: "remove", editor: editorQuoteDetails }
        ]
    } );
// this get the onclick event placed at the end so we have the var table
      $('#dtQuoteDetails').on( 'select.dt', function ( e, dt, type, indexes ) {
      //var data = dt.rows(indexes).data();
      selectedQuoteDetail = table.cell('.selected', 0).data();
      console.log('selectedQuoteDetail = '+ selectedQuoteDetail);
      
        } );
}

Cheers

Steve Warby

allan · November 2017

There doesn't appear to be a footer in any of the tables on the linked page. As such, $( 'input', this.footer() ) isn't going to find anything. Actually, worse than that, it will select all inputs since this.footer() is undefined.

Allan

classic12 · November 2017

I have tried this

btnLocal2.onclick=function(){
  var data1 = [{"Name":"Tom","Position":"Upright","Salary":"5555","link":"http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"},{"Name":"Andy","Position":"Upright","Salary":"5555","link":"http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"},{"Name":"John","Position":"Upright","Salary":"5555","link":"http://www.toolfolks.com"},{"Name":"Paul","Position":"Upright","Salary":"5555","link":"http://www.toolfolks.com"}];
  $("#DataTable1").dataTable().fnDestroy(); 
  $('#DataTable1').empty();
  $('#DataTable1').dataTable( {
  
"initComplete": function() {
    $( "#DataTable1" ).append( '<button class="btn btn-primary paddingLeft" type="button" data-toggle="collapse" data-target="#table-show-options" aria-expanded="false" aria-controls="table-show-options">Optionen</button>' );
    this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                            );
 
                            column
                                    .search( val )
                                    .draw();
                    } );
 
            column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
    } );
},
  
  
  data: data1,

            "columnDefs": [
            {
            "targets": 2,
            "data": "Salary",
            "render": function (data, type, full, meta ) 
                          {
           return '<input type="text" name="'+data+'" value = '+data+'>'
                          }
      
            },
            { 
            "targets": 3,
            "data": "link",
            "render": function ( data, type, row, meta ) 
                        {
            return '<img src="'+data+'" style="height:50px;width:50px;"/>'
                        }
            },
            {
            "targets": 1,
            "data": "Position",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="text" name="'+data+'" value = '+data+'>'
                        }
            },
            { 
            "targets": 0,
            "data": "Name",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="text" name="'+data+'" value = '+data+'>' 
                          }
            },
            { 
            "targets": 4,
            "data": "Name",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="button"  value = click Me>' 
                          }
            }
  ]
} );
}

Still nothing shows.
http://toolfolks.com/getTest/

Hit button 'local2'
Any ideas guys?

Cheers

Steve Warby

allan · November 2017

Unless I'm missing something, there still aren't any footer elements in the table - I would expect to see a tfoot element with a row and cells in it if you want to use a footer.

Allan

classic12 · November 2017

I'm nearly there.

I am using this code to ad a footer and inputs with class searchEdit

$("#DataTable1").append(
       $('<tfoot/>').append( $("#DataTable1 thead tr").clone() )
);
      $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" class = "searchEdit" placeholder="Search '+title+'" />' );

        } );

    $('.searchEdit').on( 'keyup', function () {
    alert('key up =' + this.value);
    
    table.columns( 0 ).search( this.value ).draw();
} );

I get error:

TypeError: table.columns is not a function. (In 'table.columns( 0 )', 'table.columns' is undefined).
line 176 column 18

What am I missing here ?

Also How do I say ( this column search ie the column I am in).
Cheers

Steve Warby

kthorngren · November 2017

Somewhere before using it you need to assign table to the Datatable API using something like this:
var table = $('#DataTable1').DataTable();

or you can try this:

    $('.searchEdit').on( 'keyup', function () {
    alert('key up =' + this.value);
     
    $('#DataTable1').DataTable().columns( 0 ).search( this.value ).draw();
} );

Kevin

classic12 · November 2017

I do var table = $('#DataTable1').DataTable(); when I load the data. Before the search stuff.

I have used your code and a search is performed but no results.

http://toolfolks.com/getTest/

click local then add footer
Also How do I search on just the column I am in and not columns(0)

Cheers

Steve Warby

kthorngren · November 2017

I have used your code and a search is performed but no results.

Looks like its working for column 0.

How do I search on just the column I am in and not columns(0)

You probably will need to change your code to look like the example:
https://datatables.net/examples/api/multi_filter.html

Kevin

classic12 · November 2017

When I enter P in column 0 i get no results. Same in all the edit fields. Where do you get a filter ?

I have changed the code to:

$("#DataTable1").append(
       $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
      $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" class = "searchEdit" placeholder="Search '+title+'" />' );

        } );

 $('#DataTable1').DataTable().columns().every( function () {
           var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} ;

and still get the same result. Updated at http://toolfolks.com/getTest/

kthorngren · November 2017

I think the problem is your code is placing the tfoot below the tbody which I believe is not proper HTML format. You can inspect the footer to see where it is placed. The placement seems to affect how the input event works.

I copied your code to this test case:
http://live.datatables.net/micujoka/1/edit

Open the console then type in one of the columns. You will see what you typed is output 6 times, one for each column. The search is iterating over each column not just the one you are typing in.

This example is the same code except the footer is in the HTML and the code to append the footer is commented.
http://live.datatables.net/mogilofi/1/edit

Now typing in the column outputs once in the console and the search works just for that column.

I'm not sure how to programmatically place the footer in the proper place. Maybe SO will have the answer or someone on this forum.

Kevin

HPB · November 2017

The placement of the tfoot is correct, as long as it is a child of the table.
The actual problem is that the tfoot needs to be present before initialising the datatable.

So either put it in the html like in Kevin's second example, or swap these lines in Kevin's first example:

  var table = $('#example').DataTable();

  $("#example").append($('<tfoot/>').append( $("#example thead tr").clone() ));

If there is no tfoot element present at the time of initialisation, then this.footer() for a column will return undefined and therefor add an event listener for every input on the page for every column. Every column will listen to a change in every input.

kthorngren · November 2017

The actual problem is that the tfoot needs to be present before initialising the datatable.

Thanks for the clarification @HPB. Always learning something new.

Kevin

classic12 · November 2017

Thanks for the help guys but I am just not getting this.

What code do I need to add as I presume the IDE's component is not providing the footer itself.

If I use on a button

var table = $('#DataTable1').DataTable();
  $("#DataTable1").append(
  $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));

I get the row but inside

I then use


var table = $('#DataTable1').DataTable();
 // $("#DataTable1").append($('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
  
  
  $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

     table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
              console.log(this.value);
            }
        } );
    } );

And I get the edits but with the same issue.

Assume idiot level please.....

Cheers

Steve Warby

kthorngren · November 2017

Like HPB said try swapping the order of these two lines:

var table = $('#DataTable1').DataTable();
  $("#DataTable1").append(
  $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));

Kevin

classic12 · November 2017

My code on the addFooter button is now:

 $("#DataTable1").append(
    
    $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
     var table = $('#DataTable1').DataTable();
  
    $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
 
     table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
              console.log(this.value);
            }
        } );
    } );

I get the same issue.

http://toolfolks.com/getTest/

hit get Footer button.

allan · November 2017

Your function is being run when it is already a DataTable. The table has been initialised when the page was loaded. So its already too late to add a footer (unless you destroy it, add one and then create a new DataTable).

This is an exact copy and paste of that function from your page on an uninitialised DataTable: http://live.datatables.net/kasezugi/1/edit .

Allan

classic12 · November 2017

Hi Allan,

just had this from NSBasic techies.

https://discuss.nsbasic.com/t/datatable-adding-edits-not-working/624/5

Ive added the stuff correctly ( I think ).

But it still fails.

kthorngren · November 2017

What Allan is saying is that you are initializing the Datatable then clicking the 'Footer' button to add the footer. The point is you need to add the footer before initializing the Datatable. Maybe, as Allan indicated, you can try destroy() then adding the footer and reinitializing your Datatable.

Kevin

classic12 · November 2017

Still not got this guys.

My codea folloes


Button1.onclick=function(){
 // destrot the table
        $("#DataTable1").dataTable().fnDestroy();
        //$('#DataTable1').empty();
}

Button1Copy.onclick=function(){
// add the footer
          var table = $('#DataTable1').DataTable();
          $("#DataTable1").append(
          $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
}

Button1Copy1.onclick=function(){
 // add the fields
      var table = $('#DataTable1').DataTable();
        $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );
        table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
              console.log(this.value);
            }
        } );
    } );    
}

Button1Copy1Copy.onclick=function(){
// add data
         $("#DataTable1").dataTable().fnDestroy();
          $('#DataTable1').empty();
          $('#DataTable1').DataTable({
          data: data1,

            "columnDefs": [
            {
            "targets": 2,
            "data": "Salary",
            "render": function (data, type, full, meta ) 
                          {
           return '<input type="text" name="'+data+'" value = '+data+'>'
                          }
      
            },
            { 
            "targets": 3,
            "data": "link",
            "render": function ( data, type, row, meta ) 
                        {
            return '<img src="'+data+'" style="height:50px;width:50px;"/>'
                        }
            },
            {
            "targets": 1,
            "data": "Position",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="text" name="'+data+'" value = '+data+'>'
                        }
            },
            { 
            "targets": 0,
            "data": "Name",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="text" name="'+data+'" value = '+data+'>' 
                          }
            },
            { 
            "targets": 4,
            "data": "Name",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="button"  value = click Me>' 
                          }
            }
  ]
  
  

  
});
}

Click Delete Table.
Click Add Footer Only. ( From what I see I dont think this actaully adds a footer.
Click Add Edits ( They appear in the table)
Click Add Data. Table populated.

I got this from the NSBasic guys.

AppStudioSupportLeader8h
Footers require some extra code modules.

You'll need to add these files to your manifest:

fixedHeader.bootstrap.min.css
dataTables.fixedHeader.min.js

You'll need to add this to systemheaders:

<link rel="stylesheet" href="fixedHeader.bootstrap.min.css"/>
<script src="dataTables.fixedHeader.min.js"></script>

So I have done

I have dragged the 2 files into my project.

I have added

I still have the same issue.

http://toolfolks.com/getTest/

kthorngren · November 2017

FixedHeader has nothing to do with adding search inputs to the footer. FixedHeader allows the header to stay at the top of the scrolling window:
https://datatables.net/extensions/fixedheader/

And you are getting this error when trying to load it:
GET http://toolfolks.com/getTest/dataTables.fixedHeader.min.js 404 (Not Found)

So, unless you want that feature you don't need to load it.

Let's fix your "Add footer" button. Try using the below:

btnExport.onclick=function(){
  $('#DataTable1').dataTable().fnDestroy();
      $("#DataTable1").append(
    
    $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
     var table = $('#DataTable1').DataTable();
  
    $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
 
     table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
              console.log(this.value);
            }
        } );
    } );
 };

Notice the table is destroyed then the footer is added then the Datatable is initialized.

You currently have this:

     var table = $('#DataTable1').DataTable();
         $("#DataTable1").append(
    
    $('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));

We are swapping these two lines of code.

NOTE: $('#DataTable1').dataTable().fnDestroy(); is the old command format from DT version 1.9. Since you are using a 1.10.x version you should try using the current version of the commands. In this case it would be $('#DataTable1').DataTable().destroy();. Notice the D in Datatable.

Your Add data button is destroying and emptying the table then initializing Datatable without adding the footer first and the code to build the search inputs:

Button1Copy1Copy.onclick=function(){
// add data
         $("#DataTable1").dataTable().fnDestroy();
          $('#DataTable1').empty();
          $('#DataTable1').DataTable({
.....

$('#DataTable1').empty(); removes all the child nodes of the table including the footer.

EDIT: Mis-spoke about .empty(). If you use that you won't be able to add the footer because the header is not there to clone. You probably will want to remove $('#DataTable1').empty(); from the Add data function.

Kevin

classic12 · November 2017

Thanks Kevin,

got round sorting this out.

I have now added them into the header.

Many thanks

Cheers

Steve Warby

classic12 · November 2017

One more issue,

the newly created search edits seems to be messing up the responsive settings

www.surplusanywhere.com/surplusAnywhere7

Any ideas ?

Cheers

Steve Warby

classic12 · November 2017

Another issue I have just noticed.

When I click into the edits that column performs a sort. ( as if the sort icon has been clicked ).

Any ideas ?

   $('#dtDataChanged thead th').each( function (e) {
// don't add search box to column 1    
        console.log(e);
        if(e!==1){
        if(e==0){ var title = $(this).text();
// add id to search box
        $(this).html( '<input type="text" id = "searchDeal" placeholder="Search '+title+'" />' ); }
        else{
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );}
      }
    } );
  
    
     tableDataChanged.columns().every( function () {
        var that = this;
        //console.log(that);
        
        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
              console.log(this.value);
            }
        } );
        
    } );

classic12 · November 2017

Hi guys,

Bump on this,

anyone know why the sort is triggering and the responsive is now screwed?

Cheers

Steve Warby

kthorngren · November 2017

I'm not sure what to do with your link:
www.surplusanywhere.com/surplusAnywhere7

Anyway I assume the responsive issue is that when expanding the hidden columns the search input appears instead of the column name. I copied your code into a test case:
http://live.datatables.net/torineco/1/edit

To fix both issues you can use orderCellsTop. You will need to create two header rows. The top will contain the title and sorting. The second will contain the search inputs. Additionally you will need to change the first line in your last code post to this:
$('#dtDataChanged thead tr:eq(1) th').each( function (e) {

This way the search input is only applied to the second heading row.

Working example:
http://live.datatables.net/rumakepe/1/edit

I found that responsive doesn't support complex headers so the second row is not affected by responsive. Not sure how to workaround this. Maybe one of the responsive events can be used to hide/show the second header as needed.

Kevin

classic12 · November 2017

Hi Kevin,
thanks for the help so far.

www.surplusanywhere.com/surplusAnywhere7 was to show that the responsive elements are not working correctly.

On my app I don't see the 2 header rows only one. On mine it simply puts the edits in the row where the titles were.

Maybe something to do with the NSBasic IDE ????

kthorngren · November 2017

www.surplusanywhere.com/surplusAnywhere7 was to show that the responsive elements are not working correctly.

I didn't see a Datatable so was not sure what to look at.

I don't see the 2 header rows only one

You need to create the two headers. You can see this in the HTML tab.

Kevin

classic12 · November 2017

Sorry click on the deals tab for the datatable

I am using NSBasic where I simply drag a datatable component onto the form.

Not sure how to add the extra header.

I'll ask in the NSBsic forum.

classic12 · November 2017

I asked in the NSBasic forum and they said I would have to use the API.

Is there an API to add another header ?

Cheers

Steve Warby

Add search boxes to datatable.

Add search boxes to datatable.

Answers

Howdy, Stranger!

Categories

DataTables

Add search boxes to datatable.

Add search boxes to datatable.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables