Hide data in table with a certain value

tj26

Hi,

I have a DataTable and that can have more than 1 copy of the same data but with a version field that differs.
e.g.
ValueA ValueB .... Dataset
ITEM1 HERE .... 230101
ITEM1 HERE .... 201102
ITEM2 BLAH .... 230101
ITEM2 BLAH .... 201102

The DatasetVersion var is user defined and can change when the user selects. I wish to only display the data in the table that matches the DatasetVersion value, not both versions.

I have tried using "data:" but that does not make any difference as both values are still in the table, even on loading of table. Also how can I make this dynamic so when the user selects a new value in dropdownlist the datatable will reload to match the correct version.

var DatasetVersion = "230101";

var table = $('#locTable').DataTable({
            ajax: '/locations/data',
            "lengthChange": false,
            "processing": true,
            "scrollY": "400px",
            "paging": true,
            "data": {
                             "Dataset": DatasetVersion
                        },
            language: {
                searchPlaceholder: "Enter Value",
                search: "",
            },
            "autoWidth": false,
            "columnDefs": [
                { width: "30%", "targets": 0 },
                { width: "15%", "targets": 1 },
                { width: "12%", "targets": [2, 3] },
                { width: "30%", "targets": 4 },                             
                { 'visible': false, 'targets': [5, 7] }, //hide not needed
                { "searchable": false, "targets": [2, 3, 5, 6] },
                {
                    "render": function (data, type, row) {
                        return (Math.round(data * 100) / 100).toFixed(2);
                    }, "targets": [2, 3]
                }
            ],
            orderFixed: {
                'pre': [6, 'asc']
            },
            searchDelay: 350,
            "pageLength": 100,
            "dom": '<fi<tr><"bottom"p>>',
            "language": {
                "processing": "<i class='fa fa-cog fa-spin fa-3x fa-fw'></i><span class='sr-only'>Loading...</span>",
            }
        });
        return table;
    }

Thank you

colin

As you're using ajax, you could add a function for ajax.dataSrc to tweak the data that's being received, to remove the records that you don't want. The last example on that reference page is doing something similar.

You could also do the same in initComplete. Here, the data would be fully loaded into the data, so you could use the DataTables API methods to get the data and remove the records you don't want.

Colin

tj26

I couldn't get dataSrc to work unfortunately but could get the following to work:

        $.fn.dataTableExt.afnFiltering.push(function( settings, data, dataIndex) {                  
            if(data[6] == DatasetVersion) 
            {
                return true;
            }
            return false;
            }
        );

which I added just before return table;
also changed { "searchable": false, "targets": [2, 3, 5, 6] }, to { "searchable": false, "targets": [2, 3, 5] },

colin

Nice, that's a good solution too. Thanks for reporting back,

Colin