Data-tables custom filter AJAX data function not calling AJAX

Question

I am having a issue with data-tables, I've had it working before, however the re-implementation is not working, in short I think its an ajax problem, I'll try to explain below.

//packages
"laravel/framework": "5.6.*"
"yajra/laravel-datatables-oracle": "~8.0"


//datatables css + js
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

Im using yajra's example from datatables.yajarbox.custom.filter

First code block is without custom filter added just normal ajax syntax, so if i use the below code it works fine.

<script>
    $(document).ready(function () {
        var oTable = $('#data-table-large-2').DataTable({
            dom: "<'row'<'col'<'col'l><'col'f>>r>" +
            "<'row'<'col't>>" +
            "<'row'<'col'<'col'i><'col'p>>>",
            processing: true,
            serverSide: true,
            ajax: "{{ route('my.url.to.data') }}",
            columns: [
                {data: 'sim no', name: 'sim no'},
                {data: 'voice number', name: 'voice number', searchable: true},
                {data: 'cost code', name: 'cost code', searchable: true},
                {data: 'tariff_name', name: 'tariff_name', searchable: true},
                {data: 'newNetwork', name: 'newNetwork', searchable: true},
                {data: 'International Roaming', name: 'International Roaming', searchable: true},
                {data: 'Status', name: 'Status', searchable: true},
                {data: 'dh data number', name: 'dh data number', orderable: false},
                {data: 'de data number', name: 'de data number', orderable: false},
                {data: 'dc data number', name: 'dc data number', orderable: false},
                {data: 'dk data number', name: 'dk data number', orderable: false},
                {data: 'dj data number', name: 'dj data number', orderable: false},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            deferRender: true,
            lengthMenu: [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]],
            pageLength: 10,
            columnDefs: [
                {
                    "targets": [7],
                    "visible": false
                },
                {
                    "targets": [8],
                    "visible": false
                },
                {
                    "targets": [9],
                    "visible": false
                },
                {
                    "targets": [10],
                    "visible": false
                },
                {
                    "targets": [11],
                    "visible": false
                }
            ],
            buttons: [
                'copyHtml5',
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                'colvis'
            ]
        });
        $("#reset").click(function () {
            oTable.ajax.reload();
        });

        $('#search-form').on('submit', function (e) {
            oTable.draw();
            e.preventDefault();
        });
    });
</script>

However, if i update the code to yajar's example 1 as show below the ajax request never loads...

<script>
        $(document).ready(function () {
            var oTable = $('#data-table-large-2').DataTable({
                dom: "<'row'<'col'<'col'l><'col'f>>r>" +
                "<'row'<'col't>>" +
                "<'row'<'col'<'col'i><'col'p>>>",
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('my.url.to.data') }}',
                    type: "GET",
                    data: function (data) {
                        data.sim_no = $('input[name=sim_no]').val();
                        data.v_num = $('input[name=v_num]').val();
                        data.dh_num = $('input[name=dh_num]').val();
                        data.fnetworks = $('select[name=fnetworks]').val();
                        data.fstatus = $('select[name=fstatus]').val();
                        data.fintrome = $('select[name=fintrome]').val();
                    }
                },
                columns: [
                    {data: 'sim no', name: 'sim no'},
                    {data: 'voice number', name: 'voice number', searchable: true},
                    {data: 'cost code', name: 'cost code', searchable: true},
                    {data: 'tariff_name', name: 'tariff_name', searchable: true},
                    {data: 'newNetwork', name: 'newNetwork', searchable: true},
                    {data: 'International Roaming', name: 'International Roaming', searchable: true},
                    {data: 'Status', name: 'Status', searchable: true},
                    {data: 'dh data number', name: 'dh data number', orderable: false},
                    {data: 'de data number', name: 'de data number', orderable: false},
                    {data: 'dc data number', name: 'dc data number', orderable: false},
                    {data: 'dk data number', name: 'dk data number', orderable: false},
                    {data: 'dj data number', name: 'dj data number', orderable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                deferRender: true,
                lengthMenu: [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]],
                pageLength: 10,
                columnDefs: [
                    {
                        "targets": [7],
                        "visible": false
                    },
                    {
                        "targets": [8],
                        "visible": false
                    },
                    {
                        "targets": [9],
                        "visible": false
                    },
                    {
                        "targets": [10],
                        "visible": false
                    },
                    {
                        "targets": [11],
                        "visible": false
                    }
                ],
                buttons: [
                    'copyHtml5',
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6]
                        }
                    },
                    'colvis'
                ]
            });
            $("#reset").click(function () {
                oTable.ajax.reload();
            });

            $('#search-form').on('submit', function (e) {
                oTable.draw();
                e.preventDefault();
            });
        });
    </script>

I've passed all the code so you can see full implementation how ever when testing it the below change that breaks it...

when i change this line.

ajax: "{{ route('my.url.to.data') }}",

to this

ajax: {
    url: '{{ route('my.url.to.data') }}',
    type: "GET",
    data: function (data) {
    data.sim_no = $('input[name=sim_no]').val();
    data.v_num = $('input[name=v_num]').val();
    data.dh_num = $('input[name=dh_num]').val();
    data.fnetworks = $('select[name=fnetworks]').val();
    data.fstatus = $('select[name=fstatus]').val();
    data.fintrome = $('select[name=fintrome]').val();
    }
},

not sure why this is happening the only error i get in inspector is "failed to load response data" in network tab and the below in console

GET http://my.url.to.data?draw=1&columns%5B0%5D%5Bdata%5D=sim%20no&columns%5B0%5D%5Bname%5D=sim%20no&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=voice%20number&columns%5B1%5D%5Bname%5D=voice%20number&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=cost%20code&columns%5B2%5D%5Bname%5D=cost%20code&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=tariff_name&columns%5B3%5D%5Bname%5D=tariff_name&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=newNetwork&columns%5B4%5D%5Bname%5D=newNetwork&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=International%20Roaming&columns%5B5%5D%5Bname%5D=International%20Roaming&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=Status&columns%5B6%5D%5Bname%5D=Status&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=true&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B7%5D%5Bdata%5D=dh%20data%20number&columns%5B7%5D%5Bname%5D=dh%20data%20number&columns%5B7%5D%5Bsearchable%5D=true&columns%5B7%5D%5Borderable%5D=false&columns%5B7%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B7%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B8%5D%5Bdata%5D=de%20data%20number&columns%5B8%5D%5Bname%5D=de%20data%20number&columns%5B8%5D%5Bsearchable%5D=true&columns%5B8%5D%5Borderable%5D=false&columns%5B8%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B8%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B9%5D%5Bdata%5D=dc%20data%20number&columns%5B9%5D%5Bname%5D=dc%20data%20number&columns%5B9%5D%5Bsearchable%5D=true&columns%5B9%5D%5Borderable%5D=false&columns%5B9%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B9%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B10%5D%5Bdata%5D=dk%20data%20number&columns%5B10%5D%5Bname%5D=dk%20data%20number&columns%5B10%5D%5Bsearchable%5D=true&columns%5B10%5D%5Borderable%5D=false&columns%5B10%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B10%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B11%5D%5Bdata%5D=dj%20data%20number&columns%5B11%5D%5Bname%5D=dj%20data%20number&columns%5B11%5D%5Bsearchable%5D=true&columns%5B11%5D%5Borderable%5D=false&columns%5B11%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B11%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B12%5D%5Bdata%5D=action&columns%5B12%5D%5Bname%5D=action&columns%5B12%5D%5Bsearchable%5D=false&columns%5B12%5D%5Borderable%5D=false&columns%5B12%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B12%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&sim_no=&v_num=&dh_num=&fnetworks=&fstatus=&fintrome=&_=1528357199420 0 ()

send    @   frontend.js?id=92b66…fe26cab442fe3:15192
ajax    @   frontend.js?id=92b66…fe26cab442fe3:14798
ra  @   jquery.dataTables.min.js:33
kb  @   jquery.dataTables.min.js:34
M   @   jquery.dataTables.min.js:26
N   @   jquery.dataTables.min.js:28
ga  @   jquery.dataTables.min.js:45
(anonymous) @   jquery.dataTables.min.js:93
each    @   frontend.js?id=92b66ca…:5946
each    @   frontend.js?id=92b66ca…:5781
m   @   jquery.dataTables.min.js:83
P.h.fn.DataTable    @   jquery.dataTables.min.js:159
(anonymous) @   all:334
mightThrow  @   frontend.js?id=92b66ca…:9126
process @   frontend.js?id=92b66ca…:9194
setTimeout (async)      
(anonymous) @   frontend.js?id=92b66ca…:9232
fire    @   frontend.js?id=92b66ca…:8860
fireWith    @   frontend.js?id=92b66ca…:8990
fire    @   frontend.js?id=92b66ca…:8998
fire    @   frontend.js?id=92b66ca…:8860
fireWith    @   frontend.js?id=92b66ca…:8990
ready   @   frontend.js?id=92b66ca…:9470
completed   @   frontend.js?id=92b66ca…:9480

Any help would be appreciated, thanks in advance.

Matt · Accepted Answer · 2018-06-07 13:22:56Z

I pass my data as a json object and define a dataType of json. Try this below:

<script>
$(document).ready(function () {
    var oTable = $('#data-table-large-2').DataTable({
        dom: "<'row'<'col'<'col'l><'col'f>>r>" +
        "<'row'<'col't>>" +
        "<'row'<'col'<'col'i><'col'p>>>",
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('my.url.to.data') }}',
            type: "GET",
            dataType: 'json',
            data: {
                filterParams: {
                    sim_no: $('input[name=sim_no]').val(),
                    v_num: $('input[name=v_num]').val(),
                    dh_num: $('input[name=dh_num]').val(),
                    fnetworks: $('select[name=fnetworks]').val(),
                    fstatus: $('select[name=fstatus]').val(),
                    fintrome: $('select[name=fintrome]').val()
                }
            }
        },
        columns: [
            {data: 'sim no', name: 'sim no'},
            {data: 'voice number', name: 'voice number', searchable: true},
            {data: 'cost code', name: 'cost code', searchable: true},
            {data: 'tariff_name', name: 'tariff_name', searchable: true},
            {data: 'newNetwork', name: 'newNetwork', searchable: true},
            {data: 'International Roaming', name: 'International Roaming', searchable: true},
            {data: 'Status', name: 'Status', searchable: true},
            {data: 'dh data number', name: 'dh data number', orderable: false},
            {data: 'de data number', name: 'de data number', orderable: false},
            {data: 'dc data number', name: 'dc data number', orderable: false},
            {data: 'dk data number', name: 'dk data number', orderable: false},
            {data: 'dj data number', name: 'dj data number', orderable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        deferRender: true,
        lengthMenu: [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]],
        pageLength: 10,
        columnDefs: [
            {
                "targets": [7],
                "visible": false
            },
            {
                "targets": [8],
                "visible": false
            },
            {
                "targets": [9],
                "visible": false
            },
            {
                "targets": [10],
                "visible": false
            },
            {
                "targets": [11],
                "visible": false
            }
        ],
        buttons: [
            'copyHtml5',
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6]
                }
            },
            'colvis'
        ]
    });
    $("#reset").click(function () {
        oTable.ajax.reload();
    });

    $('#search-form').on('submit', function (e) {
        oTable.draw();
        e.preventDefault();
    });
});

Then in your controller:

$filterParams = json_decode($_GET['filterParams']);
$sim_no = $filterParams->sim_no;

Collectives™ on Stack Overflow

Data-tables custom filter AJAX data function not calling AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related