在页面加载和单击按钮时进行j查询ajax调用

时间:2016-03-25 10:17:20

标签: javascript jquery ajax datatables

我有一个数据表可以从ajax调用中获取数据。通常,ajax在加载页面时运行,并获取数据填充数据。

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

我想要做的是,我希望在页面加载时使用null参数加载数据表,然后单击按钮发送带参数的ajax并获取过滤后的数据。

我试过的是这个

string DatatableJson = Utility.DatatableToJson(ds.Tables[0]);

return Content("{ \"draw\": " + Draw + ", \"recordsTotal\" :" + TotalRows + " , \"recordsFiltered\": " + TotalRows + ", \"data\": " + DatatableJson + " } ");

我尝试使用单个参数在jquery函数中获取ajax事件,以便我可以将搜索按钮单击放入其中。但我可以'让它工作,因为我想要它。

编辑:

从ActionResult返回

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

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

编辑2:

我注意到了

Sub IDsErmitteln()
Dim crtl As CommandBarControl
Dim i As Integer
Worksheets.Add
On Error Resume Next
i = 1
For Each crtl In Application.CommandBars(1).Controls(1).Controls
Cells(i, 1).Value = crtl.Caption
Cells(i, 2).Value = crtl.ID
i = i + 1
Next crtl
End Sub

给出" ReferenceError:TableData未定义"错误。所以我觉得调用函数时遇到了问题。

1 个答案:

答案 0 :(得分:0)

尝试以下方法:

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

请注意,这使用Object.fromQueryString() from sugar.js,这是一个非常有用的库,提供各种有用的东西。我之所以包含这一点,是因为您的getUrlParameter()功能已被破坏,并且不值得修复它。已编写URL解析器,使用现有的解析器。

如果你不想增加依赖项的数量,你也可以用the Date functions provided by sugar.js替换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 ...
    });
}