9

イベントで埋められる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、以下のようになります。

ここに画像の説明を入力

任意のヘルプ....

4

3 に答える 3

10

私はこの方法でそれをやった.. 

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

それは私のために働いた..

于 2013-09-17T08:03:17.280 に答える
2

試す：

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

また：

//if you don't want the table reorder/resorted
$('#ClassRegistredDataTable').dataTable().fnDraw(false);
于 2013-09-07T06:53:59.843 に答える
1

次のように、テーブルをクリアする必要があります。

$('#ClassRegistredDataTable tbody').html('');
$('#ClassRegistredDataTable').dataTable().fnDestroy();
于 2013-12-06T06:19:49.337 に答える