在Select（DropDown）更改事件上重新初始化Jquery DataTable
我正在使用Jquery UI DataTable，它填充了select(DropDown) change事件。 在PageLoad它确定。 当我执行dropdown change事件时，使用fnDestroy() Reinitialized DataTable ，但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 'Edit'; } } ] });
我的表单在Page Load上看起来像..
DropDown更改事件后，如下所示..
任何帮助……
我用这种方法做到了..
$('#ClassRegistredDataTable').dataTable().fnDestroy();
这将覆盖jquery.dataTables.css中dataTable的css
默认情况下看起来像
table.dataTable { margin: 0 auto; clear: both; width: 100%; }
把它改成..
table.dataTable { margin: 0 auto; clear: both; width: 100% !important; }
它对我有用..
尝试：
$('#ClassRegistredDataTable').dataTable().fnDraw();
要么：
//if you don't want the table reorder/resorted $('#ClassRegistredDataTable').dataTable().fnDraw(false);
即使你需要清理你的桌子，如下所示：
$('#ClassRegistredDataTable tbody').html(''); $('#ClassRegistredDataTable').dataTable().fnDestroy();