如何在这个 Javascript 中添加 jQuery DataTable答案

【问题标题】：How to add jQuery DataTable in this Javascript如何在这个 Javascript 中添加 jQuery DataTable
【发布时间】：2014-03-27 15:18:34
【问题描述】：

是否可以添加以下jQuery DataTable？

$('#myDataTable').dataTable({

    });

这个查询？

 $(document).on('click', '#PlayStatisticeight', function (e) {

    $.ajax({
        url: '@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")',
        type: 'GET',
        success: function (data) {
            $("#PartialViewTopPlayedTracksList").empty();
            $("#PartialViewTopPlayedTracksList").append(data);

            $('#myDataTable').dataTable({

            });


            $(function () {
                $("#PartialViewTopPlayedTracksList").load('@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")');
            });

        },
        error: function (xhr, textStatus, exceptionThrown) {

            var json = $.parseJSON(xhr.responseText);

            if (json.Authenticated) {
                window.location.href = '/UnAuthorizedUser/UnAuthorizedUser';
            }
            else {
                window.location.href = '/UnAuthenticatedUser/UnAuthenticatedUser';
            }
        }
    });

 });

我不知道如何以及是否可以这样做？任何帮助都非常感谢:)

【问题讨论】：

标签： c# asp.net-mvc-4 jquery-datatables

【解决方案1】：

是的，只要将新的部分添加到 DOM 后，在成功回调函数中调用它。

        success: function (data) {

            $.ajax({
                url: '@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")',
                type: 'GET',
                success: function (data) {
                    $("#PartialViewTopPlayedTracksList").empty();
                    $("#PartialViewTopPlayedTracksList").append(data);
            });

    },

【讨论】：

这可能行不通，因为在加载 _PartialViewTopPlayedTracksList 操作之前不会有任何东西可以应用 dataTable。他需要为 _PartialViewTopPlayedTracksList 执行 $.get()，然后在成功函数中应用 dataTable。
@Justin 谢谢 :) 我试过了，但它没有显示 DataTable 并阻止其他查询工作。
@Dave：谢谢 :) - 我该怎么做？对不起，我对 jQuery 不是很熟悉。
@pv619，Dave 发现了它，请参阅上面的更新，它使用 GET 加载并附加结果。
@JustinHarvey - 感谢您花时间编辑代码。我已经用新的代码更新了我的初始代码。所有查询现在都在工作，但 DataTable 没有显示出来。

【解决方案2】：

你可以初始化数据表，在 ajax 调用完成函数中将部分视图附加到视图后，如下所示：

success: function (data) {

            $.ajax({
                url: '@Url.Action("_PartialViewTopPlayedTracksList", "ReportStatistic")',
                type: 'GET',
                success: function (data) {
                    $("#PartialViewTopPlayedTracksList").empty();
                    $("#PartialViewTopPlayedTracksList").append(data);

                    $('#myDataTable').dataTable({ });
            });

    }

【讨论】：

谢谢 :) 它工作得很好，但在最终测试之后 - 查询会阻止其他查询工作。即我也在使用 jTables。有什么建议吗？ :)
如果这些插件应用在动态渲染的部分视图html上，你需要在ajax调用成功后初始化该插件