單擊按鈕后重新加載數據表

Question

我敢肯定有幾種（更好的）方法可以做到這一點，但是我無法獲得任何工作方法。 我試圖讓數據表在單擊按鈕時加載新數據（來自不同的數據源）。

這是我所擁有的：

$(document).ready(function() {

  $('#datatable2').dataTable( {

    "ajax": {
      "url":"simple4.php",
      "type":"GET"
    }  ,

    "paging":        true, 
    "pageLength": 20,
    "order": [[ 2, "asc" ]],
    "aoColumns": [
      { "bSortable": false, "width": "25%"  },
      { "bSortable": true, "width": "30%"  },
      { "bSortable": true, "width": "15%"  },
      { "bSortable": true, "width": "15%"  },

      { "bSortable": true, "width": "15%"  },
      { "bSortable": false, "width": "0%", "visible":false  },

    ],
  });

  $( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
  }); 
});

初始表（來自simple4.php）可以正常加載。 我希望單擊按鈕時可以更改它（在本例中為id = option2），但是單擊按鈕時什么也沒有發生。

以防萬一，這是按鈕代碼，以防萬一我遺漏了一些明顯的東西：

<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="1" autocomplete="off"> Compare 1 and 2
</label>

不知道是什么問題。 任何見解都會有所幫助。

更新：請參閱下面的問題說明答案。 我沒有做的一件事，顯然是在使“數據表”與“數據表”相對應，這是一個很大的不同。 您需要大寫字母D和大寫字母T。這是現在可以使用的固定代碼：

$(document).ready(function() {
var table = $("#datatable2").DataTable({

  "ajax": {
    "url":"simple3.php",
    "type":"GET"
}  ,

   "paging":        true, 
   "pageLength": 20,
"order": [[ 2, "asc" ]],
  "aoColumns": [
  { "bSortable": false, "width": "25%"  },
  { "bSortable": true, "width": "30%"  },
 { "bSortable": true, "width": "15%"  },
  { "bSortable": true, "width": "15%"  },

   { "bSortable": true, "width": "15%"  },
  { "bSortable": false, "width": "0%", "visible":false  },

  ],

});
$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});
});

還有一件事...我單擊單選按鈕時應該觸發的功能不起作用。 不得不改變這一點：

$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});

對此：

$('input[id=option2]').change(function(){
table.ajax.url( "simple4.php" ).load();
});

Answer 1

我現在無法嘗試，但我認為它可以工作：

var table = $('#datatable2').dataTable({...});

$( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
});

您沒有設置var table = ...，所以當您調用table.ajax ... table var不存在時

Answer 2

首先，正如其他人所說，未設置變量“表”。

第二，當你打電話

var table = $('#datatable2').dataTable({.....}) 

您將返回一個無法訪問任何DataTables API的jQuery對象

要獲取DataTables API實例，您需要進行如下調用：

var table = $('#datatable2').DataTable({....});

假設您的網址返回的數據格式正確，這應該可以工作。

資料來源： https : //datatables.net/faqs/#api