时间戳

首页 > 解决方案 > 使用 jQuery Datatable 搜索时如何防止触发 ajax？

jquery - 使用 jQuery Datatable 搜索时如何防止触发 ajax？

问题描述

我用 ajax 创建了一个 jQuery 数据表。我希望在页面更改和加载期间触发 ajax；但是我想实现简单的智能搜索，而不会在搜索时触发 ajax。

有什么办法可以禁用 ajax 只是为了搜索？我已经尝试如下自定义过滤。但是，它仍然无法正常工作。请建议。

$('#table').DataTable({
            dom: '<"top-filter row"<"col-md-5 no-pad-l"f><"col-md-6 pagination-margin no-pad-r"p><"cog-drop cog-width"B>><"table-body row"t>r<"row"i>',
            scrollY:"200px",
            pagingType: "full_numbers",
            scrollCollapse: true,
            searching: false,
            columns: columns,
            pageLength:100,
            lengthMenu: [
                [10, 20, 50, 100],
                ['10 items', '20 items', '50 items', '100 items']
            ], buttons: [
                {
                    extend: 'pageLength',
                    text: '<i class="fa fa-cog"></i>',
                    className:"bs-pageLength"
                }],
            language: {
                "emptyTable": "No data available",
                "lengthMenu": "_MENU_",
                "sInfo": "Records: _START_-_END_ of _TOTAL_",
                "sInfoFiltered": "",
                oPaginate: {
                    sNext: '<i class="fa fa-angle-right"></i>',
                    sPrevious: '<i class="fa fa-angle-left"></i>',
                    sFirst: '<i class="fa fa-angle-double-left"></i>',
                    sLast: '<i class="fa fa-angle-double-right"></i>'
                },buttons: {
                    pageLength: '<i class="fa fa-cog"></i>'
                }
            },
            serverSide: true,
            ajax: {
                url: url,
                data: function (d) {
                    $.blockUI();
                    var data = {};
                    data["page"] = (d.start==0?d.start:Math.floor(d.start/d.length))+1;
                    data["pageSize"] = d.length;
                    data["uniqueKey"] = fieldId;

                    return data;
                },
                dataSrc: function (json) {
                    $.unblockUI();
                    return json.data;
                }
            },
            initComplete : function() { $.unblockUI();}
        });


 $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {
                var val=$("#searchArea").val();
                if (data[0].indexOf(val)!=-1 || data[1].indexOf(val)!=-1 || data[2].indexOf(val)!=-1){
                    return true;
                }
                return false;
            }
        );
        $('#searchArea').keyup( function() {
            table.draw();
        });

HTML：

<div><input type="text" id="searchArea" name="searchArea"></div>

帮助将不胜感激。提前致谢。

标签： jquerysearchdatatable

解决方案

是的，设置 serverSide: false，然后您可以使用另一种 ajax 方法获取数据，并在第二次请求完成时为您的数据表播种。

像这样的东西：

$.ajax({
    type: "Post",
    url: "/Someting",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        if ($.fn.dataTable.isDataTable('.table')) table.destroy();
        table = $('.table').DataTable({
            "aaData": data,
            "aoColumns": [{ "data": "something" }, { "data": "somethingElse" }]
        });
    },
    error: function (err) {
        alert(err);
    }
});

推荐阅读