0
のAjaxのデータソースを変更します。jQueryの - 私は現在、私のページで次のスクリプト持って私のDataTable
HTML + JSコード：
<!DOCTYPE html>
<html>
<body>
<select>
<option value="data_20160712">data_20160712</option>
<option value="data_20160711">data_20160711</option>
</select>
</br></br></br></br>
<table id="data0" cellspacing="0" width="100%">
<thead>
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
</tfoot>
</table>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js "></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/datetime.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#data0 tfoot th').each(function(i) {
var title0 = $('#data0 thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title0 + '" data-index="' + i + '" />');
});
// DataTable
var table = $('#data0').DataTable({
"pageLength": 10,
"lengthChange": true,
responsive: true,
//fixedHeader: false,
"scrollX": true,
"ajax": "data_20160712.json",
deferRender: true,
dom: 'Blfrtip',
buttons: [{
extend: 'excelHtml5',
title: "data_20160712"
}, {
extend: 'csvHtml5',
title: "data_20160712"
}, {
extend: 'colvis',
title: "data_20160712"
}, ]
//FIX HEADER SIZE
});
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
</html>
data_20160712.json：
{"data": [
["20160712","20160712","20160712"],
["20160712","20160712","20160712"],
["20160712","20160712","20160712"]
]
}
data_20160711.json：
{"data": [
["20160711","20160711","20160711"],
["20160711","20160711","20160711"],
["20160711","20160711","20160711"]
]
}
は、どのように私は、ページ上の他の機能と選択ボックスを使用して動的にYYYYMMDD値を制御することができるように動的にdatableアップデートデータソース内のデータが変更？
ありがとうございました。
ajax.reload（）良いでしょうが私はいつも同じjsonファイルを指していた。 私は基本的に "ajax"： "data_20160712.json"を更新するためにselect要素を使い、このように動的にリロードするテーブルを取得します。 – Rgonomike
私はそれがここで説明されていると思う：https://datatables.net/reference/api/ajax.url（）.load（） 私はちょうど私が実際に選択ボックスでそれを行うことができます。 – Rgonomike
@Rgonomike OK、あなたが解決策を見いだしてくれてうれしいですが、非常に奇妙なことに、jQueryとプレーンなjavascriptが混在しています。これはまっすぐあなたを設定する必要があります： https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-選択 - オプション/ 本質的に使用する $（ "#myselect"）.val（）; または $（ "#myselect option：selected"）.text（）; 選択の値またはテキストのどちらを使用するかによって異なります。 あなたのデータソース全体にコントロールがあるなら、リファクタリングしてget/api/data？date = –