Trying to implement Individual Column Search with Inputs

DanOsh

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.

allan

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

DanOsh

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.

allan

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

Thanks,
Allan

DanOsh

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

allan

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

DanOsh

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

allan

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

DanOsh

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

allan

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

DanOsh

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",

allan

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'
        ]
    }
});

DanOsh

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" },

allan

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

DanOsh

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.

allan

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