Javascript 使j查询ajax调用既可以在页面加载上工作，也可以通过单击按钮工作

我有一个datatable，它从ajax调用中获取数据。通常，ajax在加载页面并用数据填充datatable时运行

但是我也想在我的数据表中添加一些搜索选项。我可以将参数发送到服务器端，并使用fiters返回数据集

我想做的是，我想在页面加载时用空参数加载datatable，然后用一个按钮单击send the ajax with parameters并获取过滤后的数据

我试过的是这个

<script>
    //var searchInput ;//search için aramadaki değeri almaya çalışma

    $(document).ready(function TableData(searchInput) {
        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : sParameterName[1];
                }
            }
        };

        //var searchInput = $("#inpSearch").val();//search için aramadaki değeri almaya çalışma
        var DocumentTypeId = getUrlParameter('DocumentTypeId');
        var Type = getUrlParameter('Type');
        //console.log("dokumantip: " + DocumentTypeId);
        //console.log("tip: " + Type);

        var datatable = null;
        $(document).ready(function () {
            $.extend(true, $.fn.dataTable.defaults, {
                "searching": false,
                "ordering": false
            });


            @*var dataSourceUrl = "@Url.Action(  Inbox ? "InboxList" : "OutboxList" ,"Folder")";*@
            @*var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";*@

            if (Type == 1) {
                var dataSourceUrl = "@Url.Action( Inbox ? "ERPListByType" : "OutboxList" ,"Folder")";
            } else if (Type == 2) {
                var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";
            } else if (Type == 3) {
                var dataSourceUrl = "@Url.Action( Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")";
            } else if (Type == 4) {
                var dataSourceUrl = "@Url.Action( Inbox ? "DeletedDocumentsList" : "OutboxList" ,"Folder")";
            } else {
                //açılış ekranında default gelen kutusu e-TCGB gelsin
                var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder", new { DocumentTypeID = 3 })";
            }

            if ($.fn.dataTable.isDataTable('#expandabledatatable')) {
                $('#expandabledatatable').dataTable().fnDestroy();
            }

            datatable = $('#expandabledatatable').dataTable({
                //"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
                //"processing": true,
                //info: false,

                serverSide: true,
                ajax: {
                    "url": dataSourceUrl,
                    "data": { DocumentTypeId: DocumentTypeId, searchInput: searchInput },
                    "type": "POST"
                },
                columns: [
                    {
                        "data": "Id",
                        "render": function (data, type, row) {
                            return "<label><input type='checkbox' value='" + data + "' name='chkGrid'><span class='text'></span></label>";
                        }
                    },
                    { "data": "@Html.Raw(Inbox ? "SenderCompany" : "ReceiverCompany")" },
                    { "data": "DocumentTypeName" },
                    {
                        "data": "RegistrationDate",
                        "render": function (data, type, row) {
                            return moment(parseInt(data.substr(6))).format('DD.MM.YYYY hh:mm');
                        }
                    },
                    {
                        "data": "RegistrationCode",
                        "render": function (data, type, row) {
                            console.log(row);
                            return "<a href='@Url.Action("View","Folder")/" + row["Id"] + "'>" + data + "</a>";
                        }
                    },
                    { "data": "CustomsTransportType" },
                    { "data": "VehicleIdNo" },
                    { "data": null, "defaultContent": "" },
                    { "data": "ConsignorName" },
                    { "data": "ConsigneeName" },
                    { "data": "TotalNoOfPackages" },
                    { "data": "TotalGrossWeight" }
                ],
                iDisplayLength: 10,
                language: {
                    "info": "Toplam kayıt : \_TOTAL\_<br/> Gösterilen : \_START\_ - \_END\_",
                    "paginate": {
                        "first": "İlk",
                        "last": "Son",
                        "next": "İleri",
                        "previous": "Geri"
                    }
                }
            });



        });
    });


    $(document).ready(function () {
        $('#btnSearch').click(function () {
            alert("test");
            TableData($('#inpSearch').val())
        })
    });



</script>

ds是通过存储过程从数据库返回的数据表

编辑2：

我注意到

$('#btnSearch').click(function () {
            //alert($('#inpSearch').val());
            var search = $('#inpSearch').val();
            TableData(search);
            $('#expandabledatatable').Datatable().draw();
        })

给出“ReferenceError:TableData未定义”错误。因此，我认为调用该函数有问题。

请尝试以下操作：

$(document).ready(function () {
    var url = Object.fromQueryString(window.location.search);

    $.extend(true, $.fn.dataTable.defaults, {
        searching: false,
        ordering: false
    });

    $('#btnSearch').click(function () {
        doSearch( $('#inpSearch').val(), url.Type, url.DocumentTypeId);
    });

    // click the button (do a search) on page load once
    $('#btnSearch').click();
});

注意，这使用了一个非常有用的库，它提供了各种有用的东西。我之所以包含它，是因为您的

geturlparmeter（）

函数已损坏，不值得修复。URL解析器已经编写，请使用现有的

如果不想增加依赖项的数量，也可以将moment.js替换为

我创建了一个

doSearch（）

函数，它不依赖于任何数据，只依赖于在参数中传递的数据。这样，该功能可以更容易地重复使用

function doSearch(searchInput, documentTypeId, type) {
    var dataSourceUrl;

    switch (type) {
        case 1: dataSourceUrl = "@Url.Action( Inbox ? "ERPListByType" : "OutboxList" ,"Folder")"; break;
        case 2: dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; break;
        case 3: dataSourceUrl = "@Url.Action( Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")"; break;
        case 4: dataSourceUrl = "@Url.Action( Inbox ? "DeletedDocumentsList" : "OutboxList" ,"Folder")"; break;
        default: dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; break;
    }

    if ($.fn.dataTable.isDataTable('#expandabledatatable')) {
        $('#expandabledatatable').dataTable().fnDestroy();
    }
    $('#expandabledatatable').dataTable({
        //sDom: "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
        //processing: true,
        //info: false,
        serverSide: true,
        ajax: {
            url: dataSourceUrl,
            data: { DocumentTypeId: documentTypeId, searchInput: searchInput },
            type: "POST"
        },
        // etc ...
    });
}

函数doSearch（searchInput，documentTypeId，type）{
var数据源url；
开关（类型）{
案例1:dataSourceUrl=“@Url.Action（收件箱？“ERPListByType”）：“发件箱列表”、“文件夹”）“中断；
案例2:dataSourceUrl=“@Url.Action（收件箱？“InboxListByType”）：“OutboxList”，“Folder”）”中断；
案例3:dataSourceUrl=“@Url.Action（收件箱？“OutboxListByType”）：“OutboxList”，“Folder”）”中断；
案例4:dataSourceUrl=“@Url.Action（收件箱？“删除文档列表”）：“发件箱列表”、“文件夹”）；中断；
默认值：dataSourceUrl=“@Url.Action（收件箱？“InboxListByType”）：“OutboxList”，“Folder”）；中断；
}
if（$.fn.dataTable.isDataTable（'#expandabledatatable'））{
$（'#expandabledatatable'）.dataTable（）.fnDestroy（）；
}
$（“#expandabledatatable”）.dataTable({
//sDom：“Tflt”，
//处理：对，
//信息：错，
服务器端：是的，
阿贾克斯：{
url:dataSourceUrl，
数据：{DocumentTypeId:DocumentTypeId，searchInput:searchInput}，
类型：“职位”
},
//等等。。。
});
}

只需执行

$（'#expandabledatatable'）.Datatable（）.draw（）

在您的按钮单击事件中，将使表执行ajax调用，并将表重新构建为侧节点：一个

$（document）.ready（函数（）{}）起作用。我不知道为什么要在同一个文件中多次使用它。如果我错了，请纠正我。我对jQuery没有太多经验，我对这一点非常陌生，所以您很可能是对的caramba@Reddy，不起作用：（@caramba您可以有任意多个
$（document）.ready（函数（）{}）
随你喜欢。将所有内容塞进一个库中是没有必要的，甚至会适得其反，因为这会阻止模块化。这看起来很不错，但在使用另一个库之前，我需要得到领导的确认：（您不必使用sugar.js。我之所以包含它，是因为我碰巧非常喜欢它，因为它恰好提供了一个URL解析器，而且像这样的库往往会经过非常广泛的测试。问题是，您当前用于URL解析的函数已损坏，您不应该使用它。您可以选择一个比该函数更好的函数，但是我更喜欢一个来自一个经过良好测试的图书馆，而不是你从某个网站上抄袭的图书馆。
function doSearch(searchInput, documentTypeId, type) {
    var dataSourceUrl;

    switch (type) {
        case 1: dataSourceUrl = "@Url.Action( Inbox ? "ERPListByType" : "OutboxList" ,"Folder")"; break;
        case 2: dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; break;
        case 3: dataSourceUrl = "@Url.Action( Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")"; break;
        case 4: dataSourceUrl = "@Url.Action( Inbox ? "DeletedDocumentsList" : "OutboxList" ,"Folder")"; break;
        default: dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; break;
    }

    if ($.fn.dataTable.isDataTable('#expandabledatatable')) {
        $('#expandabledatatable').dataTable().fnDestroy();
    }
    $('#expandabledatatable').dataTable({
        //sDom: "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
        //processing: true,
        //info: false,
        serverSide: true,
        ajax: {
            url: dataSourceUrl,
            data: { DocumentTypeId: documentTypeId, searchInput: searchInput },
            type: "POST"
        },
        // etc ...
    });
}