在html部分视图中以模式显示dataTable时出现问题

Question

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

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

所以我在游戏中有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>

学生分数部分

脚本

<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>

一切如何运作

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

现在，将在图形中加载特定于个人的详细信息。 单击时，“ scoresTable”被隐藏，并显示模态，并对StudentScoresDrillthrough控制器进行ajax调用，该控制器返回“ StudentScores”部分，该部分放置在“ scoresTable”的html中。

问题

现在，这一切在我第一次按学生筛选时都可以正常工作。 单击“选择”，加载图形，单击图形，数据表在模态中整齐显示。

但是由于我不知道的原因，当我再次单击“选择”以重新过滤，然后单击加载的图形时，我看到的是加载微调器出现的模态，并在此处停止。 没有任何与控制台中的数据表有关的错误，或与此有关的任何异常。

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

谢谢！

Answer 1

这是因为您的dom已重新加载，因此您失去了附加的活动。 如果您这样附加ypur事件，则应该这样做， 请参阅doc ：

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

Answer 2

首先尝试使用$（'＃studentScores'）。dataTable（）;在单击过滤器按钮后调用dataTable。 如果这不起作用，请在您的重新过滤器上单击以下命令：$（'＃studentScores'）。dataTable（）; 局部视图完全加载后。 并将您的列表直接绑定到表中，例如：StudentID回答结果@foreeach（模型中的var item）{item.User item.Answer item.Response}

Answer 3

最终找到了它，这是因为模式展示是在表格展示之前被调用的。

感谢那些发表建议的人，非常感谢