Add search boxes to datatable.

Add search boxes to datatable.

classic12classic12 Posts: 228Questions: 60Answers: 4

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();
            }
        } );
    } );

}

This question has accepted answers - jump to:

«1

Answers

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    I have also added :smile:

            $('#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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

    1. 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)

    1. 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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited 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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • HPBHPB Posts: 73Questions: 2Answers: 18

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited 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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited 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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

    <link rel="stylesheet" href="fixedHeader.bootstrap.min.css"/>

    to extra headers.

    I still have the same issue.

    http://toolfolks.com/getTest/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited November 2017 Answer ✓

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Thanks Kevin,

    got round sorting this out.

    I have now added them into the header.

    Many thanks

    Cheers

    Steve Warby

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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);
                }
            } );
            
        } );
    
  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Hi guys,

    Bump on this,

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

    Cheers

    Steve Warby

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited 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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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 ????

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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.

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

This discussion has been closed.