Integrating Custom Filtering With Standard Initialization Options

MagicSquares

Hi!

I'm trying to combine a custom filtering range search with other initialization options, but I'm getting a "Warning: Cannot reinitialise DataTable" message.

I see why - the bs-results table is initialized once with the "var table" statement and then again with the "$('#bs-results').DataTable( {" statement.

Here's the relevant code:

<script type='text/javascript'>
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min_bsr = parseInt( $('#min_bsr').val(), 10 );
        var max_bsr = parseInt( $('#max_bsr').val(), 10 );
        var bsr = parseFloat( data[0] ) || 0; // use data for the BSR column
 
        if ( ( isNaN( min_bsr ) && isNaN( max_bsr ) ) ||
             ( isNaN( min_bsr ) && bsr <= max_bsr ) ||
             ( min_bsr <= bsr   && isNaN( max_bsr ) ) ||
             ( min_bsr <= bsr   && bsr <= max_bsr ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#bs-results').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min_bsr, #max_bsr').keyup( function() {
        table.draw();
    } );
} );
</script>

<script type='text/javascript'>
    $(document).ready(function(){
$('#bs-results').DataTable( {
    'language': [ {
        'decimal': '.',
        'thousands': ','
    } ] ,
    'order': [],
    'paging': true,
    'searching': true,
    'autoWidth': false,
    'info': true,
    'fixedHeader': true,
    'dom': 'lif<t>Bp',
    'buttons': [ 
            'copyHtml5',
        'csvHtml5',
        'excelHtml5'
    ]
} );
    });
</script>

Here's the debug link:

https://debug.datatables.net/onecaw

My questions are:

1. How do I combine the two sets of table options (i.e. the keyup function to trigger the custom filtering, and the regular option settings)?

2. If I want to add filters for other data, is it as simple as just adding the additional variables / if tests to the "function( settings, data, dataIndex ) {" block?

3. On a related note, I can no longer get fixedHeader to work - the correct JS script and CSS are being included, as far as I know, but it does not work. (It used to, some time yesterday, but I've no idea what I changed since then that may be the cause of this problem).

Thanks!

Mark

MagicSquares

OK,

I seem to have got rid of the error message by:

1. Swapping the two blocks of JQuery code.
2. Adding "retrieve: true" to the "var table" declaration.

Still not sure how to get the fixedHeader thing working again, and I still want to be able to apply filters on multiple columns at the same time.

MagicSquares

OK,

I think I have worked out how to filter on multiple colums.

However, the presence of a comma in the source number is screwing up my code.

I'm using a variation of the code found on the Range Filtering page ( https://www.datatables.net/examples/plug-ins/range_filtering.html ).

The following line obtains the data from the table for each row:

var dit100 = parseInt( data[3], 10 ) || 0;

If I add the following after the above line:

dit100 = dit100.replace(/,/g, '');

or various versions of replacing commas with nothing, it stops the script from working.

I've tried the above replace command in JSFiddle ( https://jsfiddle.net/pudqpr2t/ ) and it works fine there.

Any ideas why I cannot remove the commas from this variable?

I know I must be doing something stupid here, but I can't spot what I'm doing wrong.

allan

Hi,

You probably need to do something like dit100 = dit100.replace(/,/g, '') * 1; (i.e. force it to be a number). The "alert" on your test page looks correct, but isn't actually, since the alert is showing a string, not a number.

Allan

MagicSquares

Allan,

Thanks for that.

I think I've cracked this one now.

The only problem I have left is the fixedHeader not working, but it would be better if I re-ran the debug and started another post on that one.