JQuery DataTables Individual Column Search

saffron

I have this AJAX POST function

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: "POST",
    url: url,
    data: $('#create-job-posting-form').serialize(),

    success: function()
    {
        console.log($('#create-job-posting-form').serialize());
        Swal.fire({
            position: 'center',
            icon: 'success',
            title: title,
            text: message,
            showConfirmButton: false,
            timer: 1500
        })
        $("#create-job-posting-form")[0].reset();
        $('#modal-create-job-posting').modal('hide');
        $('#job-posting-modal-save').prop('disabled', false);
        $('#job-posting-modal-close').prop('disabled', false);

        dt_filter_reload();
    },
    error: function (data)
    {
        var obj = JSON.parse(data.responseText);
        console.log(obj.errors);
    },
});

If either of the 4 operations (CRUD) is successful, dt_filter_reload(); function is called to reload the table and filters.

function dt_filter_reload()
{
    $("#job-posting-filter").empty();
    job_posting_table.ajax.reload(dt_filter(job_posting_table), false);
}

function dt_filter(job_posting_table)
{
    job_posting_table.columns([ 0, 1, 2, 4 ]).every( function () {
        var column = this;
        var select = $( `<select id="my_id" class="form-control col-sm-3 this-job-postings-filter"><option value="">- Select All -</option></select>` )
            .appendTo( "#job-posting-filter" )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
                column.search( val ? '^'+val+'$' : '', true, false ).draw();
                return false;
            });

        column.data().unique().sort().each( function ( data, j ) {
            select.append( `<option value="${data}">${data}</option>` )
        });
    });
}

Now the issue, is that the individual column filters contents does not update its value. Here is my sample screenshot.

For example, after the new entry was created, it automatically sets the Status to Pending, but under the filter the value was not added/updated.

Sample Table Screenshot

But the weird thing is, if I add a button that calls the function dt_filter_reload(); to force the table and filter to reload, the changes will be added to the filter.

I am missing or doing wrong something? I hope someone can answer this, sorry for my bad english.

Note: In addition the dt_filter is called called under initComplete function upon creating the table grid.

var job_posting_table = $("#job-hiring-posting-table").DataTable({
    ordering: true,
    info: true,
    autoWidth: false,
    responsive: true,
    aLengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    pageLength: 10,
    aaSorting: [],
    processing: true,
    language: {
        processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>'
    },
    ajax:({
        url: "url", 
        dataSrc:function(json){
            return json.data;
        },
    }),
    columns: [
        {title: "title", data: 'data', name: 'name'},
    ],
    initComplete: function() {
        dt_filter(this.api())
    }
});

A help would be appreciated. Thank you.

kthorngren

Nothing obvious stands out as an issue. Is it possible for you to post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I would use the browser's debugger to step through the code to make sure the dt_Filter() function is executing when expected and that it is processing the correct data. Without the ability to use the browser's debugger it will be difficult to troubleshoot.

Kevin

saffron

Hi Kevin, I forgot to add the image. Here is the sample screenshot. This is done after creating a new entry.

The issue is that when a new entry is created the Status is automatically set to Pending. Now under Status Filter, "Pending" does not append. In short when calling the dt_filter() after a successful data entry, it does not refresh the filters only the table grid.

colin

It would be worth looking at Editor, as it is designed to make those CRUD operations easy to manage.

Colin

kthorngren

I forgot to add the image. Here is the sample screenshot. This is done after creating a new entry.

Yes, I understand the problem to be the column search select options oren't updated when calling dt_filter_reload() from the Ajax success function. Is this correct? It looks like that should. Following the code using the debugger is the way to debug the problem. We can take a look if you post a link to your page or a test case replicating the problem.

Kevin