web-dev-qa-db-ja.com

jQuery Datatablesを破棄して再作成する

サーバー側の処理を行う2つのjQueryデータテーブルがあります。 2つのテーブルを非表示および表示するチェックボックスがあります。表示されたものを破棄して、別のテーブルを作成したいと思います。どうすればいいですか？

これは私が試したものですが、ajax.reloadは発火しません。

if ($('#mode').is(':checked')) {
    Table2.ajax.reload();
    Table1.clear();
    Table1.destroy();
} else {
    Table1.ajax.reload();
    Table2.clear();
    Table2.destroy()
}

var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
jquerydatatablescreate-tabledestroy
6
fefe

私が見るように、あなたはあなたのページに2つのデータテーブルを決して表示しないので、なぜ1つだけを使用しないのですか。データテーブルを初期化し、このようなシーケンスを使用できます

table.destroy();
$('#myTable').empty();
table = $('#myTable').DataTable( {
        columns: json.columns,
        data:    json.rows
});

必要に応じて再作成します。

1
Paun Narcis Iulian

私の場合、テーブルをリセットするには次のようにします。

$('#table_id').DataTable().clear().destroy();
$('#table_id').empty();

それにより、テーブルをリセットして初期状態に戻し、その後で再初期化できます。

4
Untherxadyus

次のようなものを試すことができます（ここに fiddle が役立ちます）：

function loadDataTable(type) {
  $('#dataTableDiv').empty();
  $('#dataTableDiv').append('<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example"> </table>');

  var table1_columnList = [{
    "data": "otherId",
    "title": "Other ID"
  }, {
    "data": "firstName",
    "title": "First Name"
  }, {
    "data": "lastName",
    "title": "Last Name"
  }, {
    "data": "gender",
    "title": "Gender"
  }];

  var table2_columnList = [{
    "data": "id",
    "title": "ID"
  }, {
    "data": "firstName",
    "title": "First Name"
  }, {
    "data": "lastName",
    "title": "Last Name"
  }, {
    "data": "gender",
    "title": "Gender"
  }, {
    "data": "dob",
    "title": "DOB"
  }, {
    "data": "race",
    "title": "Race"
  }];

  var columnList = "";

  if (type == 'table1')
    columnList = table1_columnList;
  else
    columnList = table2_columnList;


  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: datavar,
    columns: columnList,
    responsive: true,
  });

}
1
Anshika Kaythwas

適切に破棄するには、divコンテンツをクリアする必要があります

 if($('#mode').is(':checked')) {
      Table2 = $('#timesheet-table-2').DataTable({})
      Table1.clear();
      Table1.destroy();
      $('#timesheet-table').empty();
} 

else {
  Table1 = $('#timesheet-table').DataTable({})
  Table2.clear();
  Table2.destroy();
  $('#timesheet-table-2').empty();
}
1
DHARMENDRA SINGH

簡単な回避策を試してページをリロードし、ページのロード時にチェックするクエリ文字列にフラグまたは何かを渡し、どのデータテーブルをロードするかを伝えることができます。

ページをリロードすると、DOMがリセットされ、以前にロードされたテーブルが基本的に破棄されます。

例えば：

$(document).ready( function {

var flag = getUrlVars()["flag"];

if(flag != 1) {

      Table2 = $('#timesheet-table-2').DataTable({})

} else {

      Table1 = $('#timesheet-table').DataTable({})

}

}


function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.Push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
0
DAmbrozic
_if ($('#mode').is(':checked')) {
    Table2.ajax.reload();
    Table1.clear();
    Table1.destroy();
} else {
    Table1.ajax.reload();
    Table2.clear();
    Table2.destroy()
}

var Table1 = $('#timesheet-table').DataTable({
    ajax: "data.json";
})
var Table2 = $('#timesheet-table-2').DataTable({
    ajax: "data.json";
})
_

table.ajax.reload()メソッドを使用するには、ajax URLを提供する必要があります

0
Prateik Darji

これによると： https://datatables.net/reference/api/ajax.reload（） ajax.reload（）データをリロードするためだけにリモートストリームからのデータテーブルの再読み込みではなく、データテーブル自体の再読み込み

私はあなたがこのようなことをしなければならないと思います：

if($('#mode').is(':checked')) {

  Table2 = $('#timesheet-table-2').DataTable({})
  Table1.clear();
  Table1.destroy();

} else {
  Table1 = $('#timesheet-table').DataTable({})
  Table2.clear();
  Table2.destroy()
}



var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
0
Daphoque