我正在使用Jquery UI DataTable,该select(DropDown)
change
事件已填充。在PageLoad
其确定。当我执行dropdown change
事件时,DataTable
是Reinitialized
通过使用fnDestroy()
,但是格式会DataTable
发生变化。下面是我的代码。
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>';
}
}
]
});
我的表格看起来Page Load
像..
后DropDown
变化事件,看起来像下面..
任何帮助...。
我已经通过这种方法做到了。
$('#ClassRegistredDataTable').dataTable().fnDestroy();
这将覆盖CSS的dataTable的在jquery.dataTables.css
默认情况下,它看起来像
table.dataTable {
margin: 0 auto;
clear: both;
width: 100%;
}
改成..
table.dataTable {
margin: 0 auto;
clear: both;
width: 100% !important;
}
它对我有用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句