[英]Reinitialize Jquery DataTable on Select(DropDown) change event
i am using Jquery UI DataTable, which is filled on select(DropDown)
change
event. 我正在使用Jquery UI DataTable,它填充了
select(DropDown)
change
事件。 On PageLoad
its ok. 在
PageLoad
它确定。 When i perform dropdown change
event, DataTable
is Reinitialized
by using fnDestroy()
, but the format of DataTable
changes. 当我执行
dropdown change
事件时,使用fnDestroy()
Reinitialized
DataTable
,但DataTable
的格式更改。 Below is my code.. 以下是我的代码..
campusChangeEvent = function () {
$('#cmbClassCP').on('change', function () {
$('#ClassRegistredDataTable').dataTable().fnDestroy();
GetAllClassbyCampus($('#cmbClassCP :selected').val());
});
},
GetAllClassbyCampus = function (id) {
var oTable = $('#ClassRegistredDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"bRetrieve": true,
"bDestroy": true,
"sAjaxSource": "/forms/Setup/Setup.aspx/GetAllClassBycampus?CampusId=" + id,
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": "GET",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": sSource,
"data": aoData,
"success": function (data) {
fnCallback(data.d);
}
});
},
"aoColumns": [
{
"mDataProp": "RowNo",
"bSearchable": false,
"bSortable": false,
"sWidth": "20"
},
{
"mDataProp": "CampusName",
"bSearchable": false,
"bSortable": false,
},
{
"mDataProp": "ClassName",
"bSearchable": true,
"bSortable": false
},
{
"mDataProp": "Section",
"bSearchable": false,
"bSortable": false
},
{
"mDataProp": "Description",
"bSearchable": false,
"bSortable": false
},
{
"mData": null,
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return '<a class="edit" href="">Edit</a>';
}
}
]
});
My form looks on Page Load
like.. 我的表单看起来像
Page Load
...
After DropDown
change event, looks like below.. DropDown
更改事件后,如下所示..
Any Help.... 任何帮助......
i have done it by this method.. 我用这种方法做到了..
$('#ClassRegistredDataTable').dataTable().fnDestroy();
This will override css of dataTable in jquery.dataTables.css 这将覆盖DataTable的CSS在jquery.dataTables.css
By Default it looks like 默认情况下看起来像
table.dataTable {
margin: 0 auto;
clear: both;
width: 100%;
}
change it to.. 把它改成..
table.dataTable {
margin: 0 auto;
clear: both;
width: 100% !important;
}
It worked for me.. 它对我有用..
try: 尝试:
$('#ClassRegistredDataTable').dataTable().fnDraw();
or: 要么:
//if you don't want the table reorder/resorted
$('#ClassRegistredDataTable').dataTable().fnDraw(false);
Even you require to clear your table, like this: 即使您需要清理表格,如下所示:
$('#ClassRegistredDataTable tbody').html('');
$('#ClassRegistredDataTable').dataTable().fnDestroy();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.