Change columnDefs:targets when radio button checked

Jason C

Hi all,

I would like to change the columnDefs : targets when the user clicks on one of two radio buttons.
The 1st radio button will change the "Search" to just use the 1st column where the ID's are stored. The 2nd radio button will re-enable the entire table search.

Here is what I have so far...

to initialize the DT:

    var accounts_table = $('#grid').DataTable({ all my goodies in here which work });

then I have a listener:

    var radios = document.forms["targetresolution"].elements["optradio"];
    for (var i = 0, max = radios.length; i < max; i++) {
        radios[i].onclick = function () {
            if (this.value = "ByID") {
                $('.accounts_table').dataTable({
                    "columnDefs": [
                        { "targets": [0], "searchable": true },
                        { "targets": '_all', "searchable": false }
                    ]
                });
            }
            else {
                $('.accounts_table').dataTable({
                    "columnDefs": [
                        { "targets": '_all', "searchable": true }
                    ]
                });
            }
        }
    }

I can put an alert in the "if..." and each pops accordingly. I just dont know how to call the existing datatable in order to inject the new columndefs.

Jason C

I made this a bit more simple:

    $('input[type=radio][name=optradio]').change(function () {
        if (this.value == 'ByID') {
            //alert("ByID");
            $('.accounts_table').dataTable({
                "columnDefs": [
                    { "targets": [0], "searchable": true },
                    { "targets": '_all', "searchable": false }
                ]
            });
        }
        else {
            //alert("Not - also ALL");
            $('.accounts_table').dataTable({
                "columnDefs": [
                    { "targets": '_all', "searchable": true }
                ]
            });
        }
    });

Just need to know how to change columnDefs:targets with a listener.

Jason C

Is this post correct from davidkonrad?

"There is no way that you can manipulate columnDefs after the dataTable is initialized."

https://stackoverflow.com/questions/37332416/how-to-define-columndefs-after-datatables-initialization

kthorngren

In order to change the Datatables options you would need to use destroy the Datatable, using either destroy() or destroy and re-init it with all the options and data. Don't think this is what you want.

It sounds like you are only using the default search input and would like to affect what it searches with the checkbox. You will need to use a search plugin for this. The search plugin would be used when you check the box to search only the column. Otherwise the search will work normally.

Here is an example you can start from:
http://live.datatables.net/wecuvaho/1/edit

Kevin

Jason C

Hello Kevin, thank you for the reply.

I went another direction with this and dont know if this post should be deleted?

Instead of destroying/recreating the table, I simply put a keyup event on the search. I then pass the value and redraw. I have two radio buttons in the HTML both named "optradio". One has a value of "ByID" and the other...well doesn't really matter.

The code:

    $("input[type='search']").on("keyup", function () {
        if ($("input[name='optradio']:checked").val() == 'ByID') {
        accounts_table.column([0, 1]).search($(this).val()).draw();
    }
    })

This way, I simply check for the state of my "ID" radio button, if it is checked, pass the search value to the column([0,1]).

I hope I am not screwing anything up doing this!

I will also try your other suggestions.

kthorngren

column([0,1])

You will need to change this to: columns([0,1]). Notice the plural columns. This search will be an AND search between the two columns. If you want or then look at this thread:
https://datatables.net/forums/discussion/comment/126687

Otherwise your search will work as an AND or if its just one column.

Kevin