Custom column filter not returning any rows

Custom column filter not returning any rows

amar_ks7amar_ks7 Posts: 6Questions: 1Answers: 0
edited March 2022 in DataTables

I have initialized a table and using the a particular column elements to update another column in the row from using an Ajax request. Since the ajax responses are late the datatable initializes the table and the column filters are not picking up the updated values. I added some custom select filters. This works till here.
But whenever I try to filter data on the table using the column filters, it gives and empty table back. Please help how I can get this working.

var sometable = $('#sometable').DataTable({
        "initComplete": function () {
            updateURT(); //fuction which gets the table update using ajax. Also call this in drawCallback
            this.api().columns([0,1,3,7,8]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .on( { 'change': function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                            );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                            },
                        'click': function(e) {
                                // stop click event bubbling
                                e.stopPropagation();
                                }
                    });
                var tc=0;
                var pp=0;
                column.data().unique().sort().each( function ( d, j ) {
                    if(column.index() == 8){
                            select.append('<option value="OPTION1">OPTION1</option>'+
                                          '<option value="OPTION2">OPTION2</option>'+
                                          '<option value="OPTION3">OPTION3</option>'+
                                          '<option value="OPTION4">OPTION4</option>'
                                         )
                            }
                    console.log(d);
                    //console.log(+d+);
                    select.append( '<option value='+d+'>'+d+'</option>' )
                } );

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • amar_ks7amar_ks7 Posts: 6Questions: 1Answers: 0

    I am new to this. Any help is really appreciated.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Probably the best thing to do is to build the select elements in your updateURT function in the ajax method's success function. In this example, the table is being initialised there, for you just move the code in initComplete there instead,

    Colin

  • amar_ks7amar_ks7 Posts: 6Questions: 1Answers: 0
    edited March 2022

    Thanks Colin.
    But doesn't that lead to initialization happening on every ajax call?
    This is the updateURT function.

    function updateURT () {
            $('#uploadtable tbody tr').each(function(){
                var BASE_URL = "some_url";
                var file_variant;
                var file_name = $(this).find('td:nth-child(3)').html();
                $.ajax( {
                    dataType: 'json',
                    url: BASE_URL + file_name,
                    data: {},
                    success: function (data) {
                        try {
                            file_variant = data[0].VARIANT;
                        } catch (e) {
                            file_variant = "Non_Essential";
                            }
                        updateTable(file_name, file_variant);
                            },
                    });
                function updateTable(file_name, file_variant){
                    var diff_row = $("#uploadtable tbody tr td").filter(function() {
                            return $(this).text() == file_name;
                        }).closest("tr");
                    diff_row.find('td:nth-child(9)').text(file_variant);
                    }
                });
        }
    

    Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Looks like you are updating the Datatable with a jQuery method:

    diff_row.find('td:nth-child(9)').text(file_variant);
    

    Datatables won't know about these changes. You can use cell().data() to update both the table and Datatable's data cache. Or you can use cell().invalidate() or row().invalidate() to have Datatalbes update its cache.

    Kevin

  • amar_ks7amar_ks7 Posts: 6Questions: 1Answers: 0

    Thanks Kevin.
    This is very promising. I will try this.
    Could you please suggest how do I select the particular row and the cell to update the value using cell() as I am using the file_name to select/identify the row and the cell to be updated.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Take a look at the cell-selector docs for all the options. Looks like you can use something like this:

    var cell = sometable.cell( diff_row, 9 );
    

    Kevin

  • amar_ks7amar_ks7 Posts: 6Questions: 1Answers: 0
    edited March 2022

    When I try to select the row using this : https://datatables.net/forums/discussion/66164/selecting-a-row-based-on-a-cell-value

    I am getting an TypeError (TypeError: uploadtable.row(...).select is not a function)
    Here is how I updated my fuction -

    function updateTable(diff_file, diff_variant){
                    var diff_row = uploadtable.row(':contains(diff_file)').select();
                    var urt_cell = uploadtable.cell(diff_row, 9);
                    urt_cell.data( diff_variant).draw();
                    }
    

    Table initialization:

    var uploadtable = $('#uploadtable').DataTable({
            "select": true,   //added select option here
    }
    

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    I suspect this line:

    var diff_row = uploadtable.row(':contains(diff_file)').select()
    

    should be

    var diff_row = uploadtable.row(':contains("' + diff_file + '")').select()
    

    If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • amar_ks7amar_ks7 Posts: 6Questions: 1Answers: 0
    edited March 2022

    Sure Colin. I will try to create a test case for this.

    Just wanted to let you that this also resulted in the same error. However when I get the row like I was previously doing, it update the cells well. But I can see another error in the console and finally the filter don't work again either which was the actual issue.

    function updateTable(diff_file, diff_variant){
                    var diff_row = $("#uploadtable tbody tr td").filter(function() {
                            return $(this).text() == diff_file;
                        }).closest("tr");
                    diff_row.find('td:nth-child(9)').text(diff_variant);
                    //var diff_row = uploadtable.row(':contains("' + diff_file + '")').select();
                    var urt_cell = uploadtable.cell(diff_row, 9);
                    urt_cell.data( diff_variant).draw();
                    }
    
    TypeError: col is undefined10 jquery.dataTables.js:2523:3
        jQuery 3
            _fnSetCellData
            <anonymous>
            methodScoping
      
        jQuery 4
    
    

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Sign In or Register to comment.