Datatables Codeigniter

Question

I use serveride datatables in codeigniter, I want if the input filter is empty the datatable does not return data. when I click the filter button and there is data in the input then the datatable brings up the data.

JS in View

$(document).ready(function() {

    //datatables
    table = $('#table').DataTable({

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.

        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo base_url('c_log/ajax_list')?>",
            "type": "POST",
            "data": function ( data ) {
                data.jurusan    = $('#jurusan').val();
                data.kelas      = $('#kelas').val();
                data.mapel      = $('#mapel').val();
                data.tahun      = $('#tahun').val();
                data.tanggal    = $('#tanggal').val();
            }
        },

        //Set column definition initialisation properties.
        "columnDefs": [
            {
                "targets": [ -1 ], //last column
                "orderable": false, //set not orderable
            },
        ],

    });

    $('#btn-filter').click(function(){ //button filter event click
        table.ajax.reload();  //just reload table
    });
    $('#btn-reset').click(function(){ //button reset event click
        $('#form-filter')[0].reset();
        table.ajax.reload();  //just reload table
    });
});

here is view of image form

Answer 1

You could make a conditional to check if the inputs are empty and set the table to empty if any of the filter input is empty :

$(document).ready(function() {

    // input variables
    let jurusan = $('#jurusan').val();
    let kelas = $('#kelas').val();
    let mapel = $('#mapel').val();
    let tahun = $('#tahun').val();
    let tanggal = $('#tanggal').val();


    //datatables
    table = $('#table').DataTable({

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.

        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo base_url('c_log/ajax_list') ?>",
            "type": "POST",
            "data": function(data) {
                data.jurusan = jurusan;
                data.kelas = kelas;
                data.mapel = mapel;
                data.tahun = tahun;
                data.tanggal = tanggal;
            }
        },

        //Set column definition initialisation properties.
        "columnDefs": [{
            "targets": [-1], //last column
            "orderable": false, //set not orderable
        }, ],

    });

    $('#btn-filter').click(function() { //button filter event click
        // check if one or more inputs are empty
        if (!jurusan || !kelas || !mapel || !tahun || !tanggal) {
            table.clear().draw(); // empty the table
        } else {
            table.ajax.reload(); //just reload table
        }
    });
    $('#btn-reset').click(function() { //button reset event click
        $('#form-filter')[0].reset();
        table.ajax.reload(); //just reload table
    });
});

Answer 2

Try This

$(document).ready(function() {

    // input variables
    let jurusan = $('#jurusan').val();
    let kelas = $('#kelas').val();
    let mapel = $('#mapel').val();
    let tahun = $('#tahun').val();
    let tanggal = $('#tanggal').val();


    //datatables
    table = $('#table').DataTable({

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.

        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo base_url('c_log/ajax_list') ?>",
            "type": "POST",
            "data": function(data) {
                data.jurusan = jurusan;
                data.kelas = kelas;
                data.mapel = mapel;
                data.tahun = tahun;
                data.tanggal = tanggal;
            }
        },

        //Set column definition initialisation properties.
        "columnDefs": [{
            "targets": [-1], //last column
            "orderable": false, //set not orderable
        }, ],

    });

    $('#btn-filter').click(function() { //button filter event click
        // check if one or more inputs are empty
        if (!jurusan || !kelas || !mapel || !tahun || !tanggal) {
            table.clear().draw(); // empty the table
        } else {
            table.ajax.reload(); //just reload table
        }
    });
    $('#btn-reset').click(function() { //button reset event click
        $('#form-filter')[0].reset();
        table.ajax.reload(); //just reload table
    });
    table.ajax.reload();
});