web-dev-qa-db-ja.com

JQueryデータテーブルの破棄/再作成

JSON呼び出しを介してデータテーブルをリロードしようとしています。 DataTables-1.10.9とjquery-2.1.4を使用しています。

私はデータテーブル内で.ajax APIで支払いを試みましたが、どこにも行きませんでしたので、過去に訴えたこのアプローチを試してみると思いました。

HTMLがテーブルに追加されたときに中断すると、OKになります（これにより、古いデータが削除され、新しいデータが表示されます。ただし、$（ '＃tblRemittanceList'）。dataTable（ {...}）;コマンドが再度発行され、新しいデータではなく古いデータが「リロード」されます。データテーブルを使用しない場合、生のテーブルには正しいデータが表示されます。

//----------------------------------------------------------------------------------------
function fncOpenRemittancesRead(pFrRem,pToRem) {

    wsUrl = "../Json/OpenRemittances.asp"   +
                    "?qryDatabase="         + encodeURIComponent(wsDatabase)    +
                    "&qryFrRemittance=" + encodeURIComponent(pFrRem)            +
                    "&qryToRemittance=" + encodeURIComponent(pToRem);

    $('body').addClass('waiting');
    $.getJSON(wsUrl, function(data) {
        fncOpenRemittancesFill(data);
        $('body').removeClass('waiting');
    });
}

//----------------------------------------------------------------------------------------
function fncOpenRemittancesFill(pData) {
    var wsHtml = '';

    $('#tblRemittanceList tbody').empty();

    for (var i = 0; i < pData.length; i++) {
        wsHtml += '<tr>';
        wsHtml += '<td>' + trim(pData[i].col_1) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_2) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_3) + '</td>';
        wsHtml += '<td>' + fncFormatDate(pData[i].col_4,4) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_5,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_6) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_7,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_8) + '</td>';
        wsHtml += '</tr>';
    }

    $('#tblRemittanceList > tbody:last').append(wsHtml);

    $('#tblRemittanceList').dataTable({
          "autoWidth":false
        , "destroy":true
        , "info":false
        , "JQueryUI":true
        , "ordering":true
        , "paging":false
        , "scrollY":"500px"
        , "scrollCollapse":true
    });

}
javascriptjqueryajaxdatatables
17
Keith

原因

オプション_destroy:true_が原因でDataTablesがテーブルを破棄すると、元のコンテンツが復元され、生成したコンテンツが破棄されます。

ソリューション＃1

_destroy:true_オプションを削除し、 destroy() APIメソッドでテーブルを操作する前にテーブルを破棄します。

_if ( $.fn.DataTable.isDataTable('#tblRemittanceList') ) {
  $('#tblRemittanceList').DataTable().destroy();
}

$('#tblRemittanceList tbody').empty();

// ... skipped ...

$('#tblRemittanceList').dataTable({
      "autoWidth":false
    , "info":false
    , "JQueryUI":true
    , "ordering":true
    , "paging":false
    , "scrollY":"500px"
    , "scrollCollapse":true
});
_

ソリューション＃2

_destroy:true_オプションを削除し、テーブルを破棄して再作成する代わりに、 clear() を使用してテーブルの内容をクリアします rows.add() テーブルデータを追加してから、 draw() テーブルを再描画します。

この場合、ページの初期化時にDataTablesを初期化する必要があります。

58
Gyrocode.com

次のような検索オプションを使用して、データテーブルを初期化できます。

var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true, ...

あなたがそれをクリアして破壊する必要があるよりも：

$('#myTable').DataTable().clear().destroy();

最後までに、データテーブルを再作成します。

 var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true,

ここで取得チュートリアルを確認してください： https://datatables.net/reference/option/retrieve

6
Dierp
datatable refresh
$('#Clienttbl').dataTable().fnClearTable();
0
Jaydeepsinh Makwana

destroy（）メソッドを使用して、次のようにテーブルを破壊します。

$('#experience-table').DataTable().destroy();

そして、この例のようにそれを再初期化します：

var table= $('#experience-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{url('employee/experience/list/experience')}}'+'/'+emp_id,
                    columns: [
                        { data: 'emp_no', name: 'emp_no' },
                        { data: 'position', name: 'position' },
                        { data: 'organization', name: 'organization' },
                        { data: 'duration', name: 'duration' },
                        { data: 'action', name: 'action' },
                    ],
                    searching: false


                });
0
Jasbin Karki