javascript - 数据表自定义过滤器 AJAX 数据函数不调用 AJAX

标签 javascript jquery ajax datatables yajra-datatable

我遇到了数据表的问题，我以前用过它，但是重新实现不起作用，简而言之，我认为这是一个 ajax 问题，我将在下面尝试解释。

//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>

我使用来自 datatables.yajarbox.custom.filter 的 yajra 示例

第一个代码块没有添加自定义过滤器，只是添加了普通的 ajax 语法，所以 如果我使用下面的代码，它工作正常。

<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>

但是，如果我将代码更新为 yajar 的示例 1如下所示，ajax 请求从不加载...

<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>

我已经通过了所有代码，因此您可以在测试它时看到完整的实现，但下面的更改会破坏它...

当我改变这一行时。

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

为此

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();
    }
},

不确定为什么会发生这种情况，我在检查器中遇到的唯一错误是网络选项卡中的“无法加载响应数据”以及控制台中的以下内容

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

如有任何帮助，我们将不胜感激，在此先致谢。

最佳答案

我将我的数据作为 json 对象传递，并定义 json 的 dataType。试试下面这个:

<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();
    });
});

然后在你的 Controller 中:

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

关于javascript - 数据表自定义过滤器 AJAX 数据函数不调用 AJAX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50736727/

上一篇：javascript - 在 firestore 中缓存 get 的第一个实现

下一篇：javascript - jQuery 计数器并添加一个类但不添加到前两个？

相关文章：

javascript - 如何捕获 Javascript TypeError？

javascript - 将 JsonArray 数据从 serveResource 传递到 jsp 并在 JSP 上显示 - Liferay

javascript - 如何选择FileReader的读取方式？

javascript - "TypeError: cannot read property ' 原型(prototype) ' of undefined"当 Jest 测试包含 c3 图表的 react 组件时

javascript 模板引擎保持对文本框等的关注？

javascript - 在 HTML DOM Elements 下添加 javascript 文件或 css 文件

javascript - 执行ajax时的localStorage问题

javascript - 使用 ng-options 和 AngularJS 自动选择新的附加值

javascript - 集成 VIN 解码器 API

jquery - 扩展的自动建议功能

©2024 IT工具网  联系我们