在 Select(DropDown) 更改事件上重新初始化 Jquery DataTable答案

【问题标题】：Reinitialize Jquery DataTable on Select(DropDown) change event在 Select(DropDown) 更改事件上重新初始化 Jquery DataTable
【发布时间】：2013-09-11 07:09:31
【问题描述】：

我正在使用 Jquery UI DataTable，它在 select(DropDown) change 事件上填充。在PageLoad 上没问题。当我执行dropdown change 事件时，DataTable 使用Reinitialized 是Reinitialized，但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 更改事件之后，如下所示..

任何帮助....

【问题讨论】：

标签： jquery datatable

【解决方案1】：

即使你需要清理你的桌子，像这样：

$('#ClassRegistredDataTable tbody').html('');
$('#ClassRegistredDataTable').dataTable().fnDestroy();

【讨论】：

【解决方案2】：

我是用这个方法做到的。。

 $('#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;
}

它对我有用..

【讨论】：

【解决方案3】：

尝试：

$('#ClassRegistredDataTable').dataTable().fnDraw();

或：

//if you don't want the table reorder/resorted
$('#ClassRegistredDataTable').dataTable().fnDraw(false);

【讨论】：

fnDraw() 和 fnDestroy() 在我的页面上具有相同的效果。
如果你摆脱 GetAllClassbyCampus($('#cmbClassCP :selected').val()); 会发生什么在 fnDraw 之后？
我认为您不应该在数据表已经初始化后再次尝试初始化它。
啊，我明白了。您从该下拉列表中选择一个校区，并希望它根据该校区绘制一个全新的数据表，对吧？
这可能是你更好的选择：datatables.net/examples/api/multi_filter.html