Question

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

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

所以我有3个观点：

StudentsList

脚本

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

一切如何运作

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

现在，图表中加载了特定于个人的详细信息。单击时，隐藏'scoresTable'并显示模态，并向StudentScoresDrillthrough控制器发出ajax调用，该控制器返回放入'scoresTable'html中的'StudentScores'部分。

问题

现在，这一切都完美地首次由学生过滤。我点击“选择”，图表加载，我点击图表，数据表显示在模态中。

然而，由于我不知道的原因，当我再次单击“选择”重新过滤，并点击加载的图形时，我看到的是模式与加载微调器一起显示，并且它停在那里。没有与控制台中的数据表有关的错误，或者与此无关的任何异常。

我很欣赏这是一个阅读，但我很想听听有关可能导致我的问题的任何想法。

谢谢！

Answer 1

这是因为你的dom被重新加载，所以你失去了附加的事件。如果您附加ypur事件，请执行see doc：

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

Answer 2

首先尝试使用$（'＃studentScores'）点击过滤器按钮后调用dataTable。dataTable（）; 如果这不起作用而不是你的refilter点击写： $（ '＃studentScores'）的dataTable（）; 部分视图完全加载后。并将您的列表直接绑定在表中，例如：学生卡回答结果 @foreeach（模型中的var项） { item.User item.Answer item.Response }

Answer 3

最后跟踪它，这是因为在表格显示之前调用了模态节目。

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

在html局部视图中以模态显示dataTable的问题

3 个答案: