如何解决如何销毁 ASP.net MVC 视图上现有的 jQuery 表,然后重建它?
在视图启动时,我创建了一个 jQuery 表。它代表我从数据库中检索到的一组“未解决的错误”错误。默认。相应的单选按钮被选中。
对于选定的单选按钮(在本例中为“错误已解决”单选按钮),我尝试销毁先前创建的数据表,然后针对该按钮所代表的“错误”类型重建它。
DataTables 警告:table id=blogerrorlogs-data-table - 无法重新初始化 DataTable。有关此错误的详细信息,请参阅 http://datatables.net/tn/3
我使用 http://datatables.net/tn/3 作为参考来销毁 jQuery 数据表,但它不起作用。
我做错了什么?
这是视图的代码"
@model GbngWebClient.Models.BlogErrorLogForMaintListVM
<h2 class="page-header">Error Log Maintenance</h2>
@* For the error message returned as JSON. *@
<div>
@* Hidden as display = "none". *@
<p class="alert alert-danger" id="jsonErrorMessage" style="display:none"></p>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="panel">
<div>
<input type="radio" id="notresolved" value="notresolved" checked>
<label for="notresolved">Errors Not Resolved</label>
</div>
<div>
@* Default as checked. *@
<input type="radio" id="resolved" value="resolved">
<label for="resolved">Errors Resolved</label>
</div>
</div>
<br />
<div class="panel panel-primary list-panel" id="list-panel">
<div class="panel-heading list-panel-heading">
<h1 class="panel-title list-panel-title">List of Error Logs</h1>
</div>
<br />
<div class="panel-body">
<div style="overflow-x:auto; width:100%">
<table id="blogerrorlogs-data-table" class="table table-striped table-bordered" style="width:100%"></table>
</div>
</div>
</div>
</div>
</div>
@Scripts.Render("~/bundles/datatables")
@Scripts.Render("~/Content/datatables")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js" referrerpolicy="origin">
</script>
@section Scripts
{
<script type="text/javascript">
var blogErrorLogListVM;
// Initial start up.
$(function () {
LoadJqueryTable();
});
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// The 'resolved' radio button click event handler.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
$('#resolved').on('click',function () {
$.ajax({
type: "POST",url: "/BlogErrorLogMaint/SetBooleanSessionVar",data: { value: true },// Boolean true. Note: cannot be True.
datatype: "json",Traditional: true,success: function (data) {
$("#notresolved").prop("checked",false);
$('#jsonErrorMessage').remove();
// Destroy the prior created jQuery table.
DestroyJqueryTable();
// Load the jQuery table for the radio button selection made.
LoadJqueryTable();
}
});
});
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// The 'not resolved' radio button click event handler.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
$('#notresolved').on('click',data: { value: false },// Boolean false. Note: cannot be False.
datatype: "json",success: function (data) {
$("#resolved").prop("checked",false);
$('#jsonErrorMessage').remove();
// Destroy the prior created jQuery table.
DestroyJqueryTable();
// Load the jQuery table for the radio button selection made.
LoadJqueryTable();
}
});
});
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// Destroy the jQuery datatable.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function DestroyJqueryTable() {
blogErrorLogListVM = {
destroy: function () {
dt = $('#blogerrorlogs-data-table').DataTable({
"destroy": true
});
}
}
// Destroy the datatable.
blogErrorLogListVM.destroy();
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// Load the jQuery datatable.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function LoadJqueryTable() {
blogErrorLogListVM = {
dt: null,init: function () {
dt = $('#blogerrorlogs-data-table').DataTable({
"serverSide": true,// For processing server-side.
"processing": true,// For showing the progress bar.
"ajax": {
"url": "@Url.Action("GetBlogErrorLogsForMaintList","BlogErrorLogMaint")","dataType": "json","data": function (data) {},"error": function (error) {
$("#jsonErrorMessage").text(error.responseJSON.ErrorMessage);
$("#jsonErrorMessage").css("display","block");
}
},"columns": [
{
"title": "Actions","data": "BlogErrorLogId","searchable": false,"sortable": false,"render": function (data,type,row,full,Meta) {
// Hyper links that will navigate to the views - it calls the controllers action passing the row's ‘blogErrorLogId’ to pull
// the information for it and display in the modals herein - partial views.
// - Builds the query string per hyper link.
return '<a href="@Url.Action("EditBlogErrorLog","BlogErrorLogMaint")?blogErrorLogId=' + data + '" class="editBlogErrorLog">Edit</a> | <a href="@Url.Action("DetailsBlogErrorLog","BlogErrorLogMaint")?blogErrorLogId=' + data + '" class="detailsBlogErrorLog">Details</a> | <a href="@Url.Action("DeleteBlogErrorLog","BlogErrorLogMaint")?blogErrorLogId=' + data + '" class="deleteBlogErrorLog">Delete</a>';
}
},{ "title": "Log Date","data": "LogDateTime","searchable": true },{ "title": "User Name","data": "UserName",{ "title": "Message Type","data": "MessageType",{ "title": "Log Message","data": "LogMessage",{ "title": "Resolved Switch","data": "ResolvedSwitch",{ "title": "Resolved Date","data": "ResolvedDateTime",],"lengthMenu": [[10,25,50,100],[10,100]],});
}
}
// Initialize the datatable.
blogErrorLogListVM.init();
}
</script>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。