Trying to implement Individual Column Search with Inputs

Trying to implement Individual Column Search with Inputs

DanOshDanOsh Posts: 37Questions: 11Answers: 1

In trying to add the code from http://www.datatables.net/examples/api/multi_filter_select.html,
the Javascript code starts with the DataTables code:
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {

However, the DataTables_Editor code is a bit different...

[code]
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( { ....
Label Names
Fields....
[/code]

and then:
[code]
$('#example').DataTable( {
[/code]

I try to put the following code in after the $('#example').DataTable( {
but then the web page does not load with the table data, it only has the header and footer.

This question has an accepted answers - jump to answer

Answers

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

    Could you link to the page you are working on so I can take a look and see what is going wrong. Sounds like there is a Javascript error on the page, that you will find in the Javascript console of your browser.

    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    It is http://www.skywateryachts.com/datatables_editor/examples/simple/boats.html

    But I removed the code. Essentially it just displays the Title and paragraph at the top, and then the top and bottom header rows without the data rows.

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

    Are you able to put up a copy of the page with the code that is causing the issue please?

    Thanks,
    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Allan, I couldn't paste as it had too many characters.

    http://www.skywateryachts.com/datatables_editor/examples/simple/boats1.txt and
    http://www.skywateryachts.com/datatables_editor/examples/simple/boats1.html are the pertinent code and html display when I add the Single Column code.

    http://www.skywateryachts.com/datatables_editor/examples/simple/boats1.txt
    http://www.skywateryachts.com/datatables_editor/examples/simple/boats1.html are the code and html display without the Single Column code that works.

    Thank you

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

    Javascript error on the page. Just before dom: "Tfrtip", there is a missing semi-colon.

    Your browser's developer tools console should show a message to this effect.

    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Hi Allan,

    Tearing my hair out as I've gone through the code repeatedly.

    Now I get: '''SyntaxError: missing } after property list -| };'''

    Could there be a conflict somewhere else in adding features?

    http://www.skywateryachts.com/datatables_editor/examples/simple/boats1.txt

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

    There is a chuck of Javascript, outside of any tags, before the doctype. Is that intentional?

    Also you have a spare }); at the end of your initComplete block - I'm not sure what that is doing there either and will certainly cause a syntax error.

    Finally, you still need a comma at the end of initComplete :-)

    You may wish to run your Javascript through JS Beautifier - it is exceptionally useful for finding syntax errors as it corrects the nesting level of the code, if you can't find the errors from the Javascript debugger in your browser.

    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Hi Allan,

    Sorry about the chunk of code, that was just for my own use and is not in the uploaded online html page, just had it in the text file.

    I use Code Lobster and it gives me the nesting levels very well and it actually confirmed my original thought that I was actually 'missing' the }); which is why I added it, because it closes $('#example').DataTable( { before the initComplete code.

    And the initComplete code mirrors exactly the code at https://datatables.net/examples/api/multi_filter_select.html.

    Further, I don't follow where I need to add the comma you mentioned at the end of initComplete as I don't see a missing comma between my code and at https://datatables.net/examples/api/multi_filter_select.html nor does Firebug give that error.

    The only error I'm getting is not a comma error in Firebug, but ";" and I don't know where that is missing because I've mirrored the initComplete code at https://datatables.net/examples/api/multi_filter_select.htm.

    "SyntaxError: missing ; before statement ajax: "../php/boats.php".

    I guess it goes back to the top of this thread, is it because the Datables Editor code is a bit different than the Datables code?

    Dan

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

    Further, I don't follow where I need to add the comma you mentioned at the end of initComplete

    You want:

    initComplete: function ( settings, json ) {
      ... code
    },
    

    note the comma after the closing brace for the function. It just tells Javascript there there are more options to come. I don't need it in my example you linked to since I don't have more parameters - but you do, so you need it.

    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Hi Allan, I'm still getting the syntax error -

                      SyntaxError: missing ; before statement ajax: "../php/boats.php.
    

    I placed the comma as stated and still get the above. The page code is at http://www.skywateryachts.com/datatables_editor/examples/simple/boats1.txt

    ''' $('#example').DataTable( {
    initComplete: function ( settings, json ) {
    var api = this.api();

            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                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 ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
    
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },
    } );
    
        dom: "Tfrtip",
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    You still have the } ); that I recommended that you remove.

    $('#example').DataTable({
        initComplete: function() {
            var api = this.api();
    
            api.columns().indexes().flatten().each(function(i) {
                var column = api.column(i);
                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 ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
    
                column.data().unique().sort().each(function(d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        },
        dom: "Tfrtip",
        ajax: "../php/boats.php",
        columns: [{
            data: "id"
        }, {
            data: "Vessel_Name"
        }, {
            data: "Base_Category"
        }, {
            data: "Sub_Category"
        }, {
            data: "Listing_Price",
            render: $.fn.dataTable.render.number(',', '.', 0)
        }, {
            data: "LOA",
            render: $.fn.dataTable.render.number(',', '.', 1)
        }, {
            data: "Built"
        }, {
            data: "Builder"
        }, {
            data: "Guest_State_Rooms"
        }, {
            data: "Guest_Sleeps"
        }, {
            data: "Crew_Quarters"
        }, {
            data: "Crew_Berths"
        }, {
            data: "Crew_Sleeps"
        }, {
            data: "Beam",
            render: $.fn.dataTable.render.number(',', '.', 1)
        }, {
            data: "Engines"
        }, {
            data: "Engine_HP",
            render: $.fn.dataTable.render.number(',', '.', 0)
        }, {
            data: "Engine_Type"
        }, {
            data: "Engine_Propulsion"
        }, {
            data: "Engine_Make"
        }, {
            data: "City"
        }, {
            data: "State"
        }, {
            data: "Country"
        }, {
            data: "Agreement"
        }, {
            data: "Broker_Info"
        }, {
            data: "Details"
        }, {
            data: "NFS_USA"
        }, {
            data: "Reduced"
        }, {
            data: "Opps"
        }, {
            data: "New"
        }, {
            data: "Sold"
        }, {
            data: "Yatco_ID"
        }, {
            data: "YW_ID"
        }, {
            data: "SW_ID"
        }, {
            data: "File"
        }, {
            data: "Date_Exported"
        }, {
            data: "Date_Listed"
        }, {
            data: "Date_Reduced"
        }, {
            data: "Date_Sold"
        }, {
            data: "Date_Delivered"
        }, {
            data: "Est_DOM"
        }, {
            data: "Currency"
        }, {
            data: "Price_Original",
            render: $.fn.dataTable.render.number(',', '.', 0)
        }, {
            data: "Price_Reported_Selling",
            render: $.fn.dataTable.render.number(',', '.', 0)
        }, {
            data: "Price_Rumored",
            render: $.fn.dataTable.render.number(',', '.', 0)
        }, {
            data: "Price_Previous",
            render: $.fn.dataTable.render.number(',', '.', 0)
        }, {
            data: "Amt_Reduced"
        }, {
            data: "Amt_Pct"
        }, {
            data: "Pct_Dif_Price"
        }, {
            data: "GRT"
        }, {
            data: "Public_Comments"
        }, {
            data: "Subscriber_Comments"
        }, {
            data: "Heli"
        }, {
            data: "Elevator"
        }, {
            data: "S_Rooms"
        }, {
            data: "Ex_Name"
        }, {
            data: "Yard_Nu"
        }, {
            data: "Hybrid"
        }, {
            data: "Valid_ID"
        }, {
            data: "Vessel_Link"
        }, {
            data: "Misc"
        }],
        tableTools: {
            sRowSelect: "os",
            sSwfPath: "../../../datatables/tabletools/swf/copy_csv_xls_pdf.swf",
            aButtons: [{
                    sExtends: "editor_create",
                    editor: editor
                }, {
                    sExtends: "editor_edit",
                    editor: editor
                }, {
                    sExtends: "editor_remove",
                    editor: editor
                }, {
                    sExtends: "collection",
                    sButtonText: "Save",
                    sButtonClass: "save-collection",
                    aButtons: ['copy', 'csv', 'xls', 'pdf']
                },
                'print'
            ]
        }
    });
    
  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Works Great! http://www.skywateryachts.com/datatables_editor/boats.html. Thanks for your patience, I found that 'last' issue of the }); because initially I added at the end of the entire code thinking I needed it to close out the full $('#example').DataTable({.

    However, now I've added it on the DataTables display page using instead of the DataTables Editor, a DataTables example.

    The following page displays the auto-fill boxes but when I click on one of the values, I get no return.http://www.skywateryachts.com/datatables/boats_full.html. The only difference I can see in the two tables, is the Editor does not wrap columns or data. Could that be the problem?

    $(document).ready(function() {
        $('#example').dataTable( {
            "processing": true,
            "serverSide": true,
            
                initComplete: function () {
                var api = this.api();
     
                api.columns().indexes().flatten().each( function ( i ) {
                    var column = api.column( i );
                    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 ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
     
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            },
            
            "ajax": {
                "url": "boats_post.php",
                "type": "POST"
            },
            "columns": [
    
                { "data": "id" },
                { "data": "Vessel_Name" },
                { "data": "Base_Category" },
                { "data": "Sub_Category" },
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    The following page displays the auto-fill boxes but when I click on one of the values

    What auto fill boxes - the select filter inputs? The page you linked to doesn't appear to display any filters other than the DataTables default global filter.

    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Sorry Allan, I gave you the wrong URL. The URL with the "1" below is where I have the Individual Search Columns function.

    http://www.skywateryachts.com/datatables/boats_full.html
    http://www.skywateryachts.com/datatables/boats_full1.html

    It works great here http://www.skywateryachts.com/datatables_editor/boats.html calling the same database. As I stated above, could it be the apostrophes in the code in the DataTables example I used, as I see nothing else different in the DataTables Editor example I used where it does work. I.E. ajax, columns and data are wrapped in quotes in DataTables whereas the DataTables example I used do not have them wrapped.

            "ajax": {
                "url": "boats_post.php",
                "type": "POST"
            },
            "columns": [
    
                { "data": "id" },
                { "data": "Vessel_Name" },
                { "data": "Base_Category" }
    

    I am new to some of this, but that's what I love about the application, it is a great learning tool as the forum is an excellent resource and I have picked up a lot in the limited time since I've found DataTables.

    Thanks for your responses.

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

    So the issue is that you are using server-side processing on your boats_full1.html page. The following is being submitted to the server for it to search: ^A3$ (if I select A3 on the Vessel Name column).

    However, the server-side script doesn't appear to be configured for regular expressions. So I would suggest moving the regular expression characters (i.e. ^ and $) and it should start working.

    Allan

This discussion has been closed.