在 html 部分视图中以模态显示 dataTable 的问题答案

【问题标题】：Problems displaying dataTable in modal in html partial view在 html 部分视图中以模态显示 dataTable 的问题
【发布时间】：2016-11-02 08:53:41
【问题描述】：

我昨天在这里问了一个关于这个问题的问题，但被否决了，可能是因为我没有包含任何可以理解的代码。

希望这个问题会更完整，让您更轻松地帮助我。

所以我有 3 个视图在播放：

学生名单

脚本

@{
ViewBag.Title = "StudentsList";
Layout = "~/Views/Shared/_LayoutM.cshtml";
}
@Scripts.Render("~/Scripts/charts")
@Styles.Render("~/Content/formsaltcss")
@model Mvc.Models.StudentViewModel
<script type="text/javascript">
$(document).ready(function () {
    $('#AddStudentData').click(function () {
        var type = 'student';
        var id = 0;

        $('#holderArea').html('');
        if (!$('#studentDropDown option:selected').length) {
            ToastrWarning('Please select a student before running the report');
            return;
        }
        id = $('#studentDropDown').val();

        var data = { id: id };

        $.ajax({
            url: '/Student/StudentAnalysisFiltered',
            async: false,   
            data: data,
            dataType: 'html',
            success: function (data) {
                $('#holderArea').html(data);
            }
        });
    });
});

相关 HTML

                                <div class="panel panel-default">
                                <div class="panel-heading">
                                <h3 class="margin-bottom0 text-center">Student Analysis</h3></div>


                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="col-sm-2 control-label">Student Name</label>
                                                        <div class="col-sm-4">
                                                            @Html.DropDownListFor(c => c.Students, new SelectList(Model.Students, "StudentID", "Name"), "Choose Student"
    , new { id = "studentDropDown", @class = "form-control input-sm", data_width = "100%" })
                                                        </div>
                                                        <div class="col-sm-offset-2 col-sm-10">
                                                            <button id="AddStudentData" type="button" class="btn btn-sm btn-primary">Select</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="holderArea">
                            </div>

StudentAnalysisSelected 脚本

@using Data
@using Mvc.Helpers
@model Mvc.Models.StudentViewModel
@Scripts.Render("~/Scripts/datatables")
<script>
    function StudentScoresModal(studentID, answer, result) {
        $('#scoresTable').hide();
        $('#scoresSpinner').show();
        $('#scoresModal').modal('show');

        var testID = @Html.Raw(Model.testID );

        $.ajax({
            cache: false,
            url: "/Student/StudentScoresDrillthrough",
            data: { 'studentID': studentID, 'answer': answer, 'result': result, 'testID': testID},
            success: function (data) {
                $('#scoresTable').html(data);
                $('#scoresTable').show();
                $('#scoresSpinner').hide();
            },
            error: function () {
                toastr.options.positionClass = 'toast-bottom-right';
                toastr.options.backgroundpositionClass = 'toast-bottom-right';
                toastr.options.timeOut = 3000;
                toastr.error('Unable to get student results.');
            }
        });
    }
</script>

相关 HTML

    <div id="holderArea">
    <button type="button" class="btn btn-sm btn-primary" onclick="StudentScoresModal(id, '', '')" id="@q.StudentID">View Scores</button>
</div>

    <div class="modal in modal-stack" id="scoresModal" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><strong>Student Scores</strong></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="table-responsive" id="scoresTable" style="display:none">
                            </div>
                            <div class="sk-cube-grid absolute-center top-85" id="scoresSpinner" style="display:none">
                                <div class="sk-cube sk-cube1"></div>
                                <div class="sk-cube sk-cube2"></div>
                                <div class="sk-cube sk-cube3"></div>
                                <div class="sk-cube sk-cube4"></div>
                                <div class="sk-cube sk-cube5"></div>
                                <div class="sk-cube sk-cube6"></div>
                                <div class="sk-cube sk-cube7"></div>
                                <div class="sk-cube sk-cube8"></div>
                                <div class="sk-cube sk-cube9"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

StudentScoresPartial

脚本

<script>
    $(document).ready(function () {
        $('#studentScores').dataTable({
            "data": @Html.Raw(Model.StudentScoresJson),
            "columns":[
                        { "sName": "StudentID" },
                        { "sName": "Answer" },
                        { "sName": "Result" }
            ]
        });
    });
</script>

HTML

<table id="studentScores" class="display table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>StudentID</th>
            <th>Answer</th>
            <th>Result</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>User</th>
            <th>Answer</th>
            <th>Response</th>
        </tr>
    </tfoot>
    <tbody></tbody>
</table>

如何运作

在“学生列表”视图中，有一个包含学生列表的下拉列表，以及一个用于过滤个人的“选择”按钮。 OnClick 这将清除 holderArea div 并将 studentID 传递给控制器方法，该方法返回部分视图“StudentAnalysisSelected”并将其放置在 holderArea div 中。

现在加载了一个图表，其中包含特定于个人的详细信息。单击时，'scoresTable' 被隐藏并显示模式，并且对 StudentScoresDrillthrough 控制器进行 ajax 调用，该控制器返回放置在 'scoresTable' 的 html 中的 'StudentScores' 部分。

问题

现在这一切都在我第一次按学生过滤时完美运行。我点击“选择”，图表加载，点击图表，数据表整齐地显示在模态中。

但是由于我不知道的原因，当我再次单击“选择”以重新过滤并单击已加载的图形时，我所看到的只是模式与加载微调器一起出现，并停在那里。没有与控制台中的数据表相关的错误，或者任何异常情况。

我很欣赏这篇文章，但我很想听听有关可能导致我的问题的任何想法。

谢谢！

【问题讨论】：

假设这是 Asp.Net MVC.. 你必须添加相关标签。
完成，谢谢。
在 Web 浏览器的控制台中获取任何东西？
没有任何问题可以提示@Shashank Sood

标签： javascript jquery html ajax asp.net-mvc

【解决方案1】：

这是因为您的 dom 已重新加载，因此您丢失了附加的事件。如果你像这样附加 ypur 事件，应该这样做，see doc：

$('#AddStudentData').on('click',function () {});

【讨论】：

感谢@Sylvain Guilbert 的提示，但不幸的是没有这样做

【解决方案2】：

首先尝试使用 $('#studentScores').dataTable(); 在单击过滤器按钮后调用 dataTable；如果这不起作用而是在您的重新过滤器上单击写入： $('#studentScores').dataTable(); 在您的局部视图完全加载后。并将您的列表直接绑定在表格中，例如：学生卡回答结果 @foreeach（模型中的变量项） { 项目.用户项目.答案项目.响应 }

【讨论】：

感谢您的建议。事实证明，这是因为我在 table.Show 之前调用了 modal.Show... 我将它移到 after 并且它现在可以工作了。

【解决方案3】：

终于追到了，原来是在table show之前调用了modal show。

感谢提供建议的人，非常感谢

【讨论】：