検索ボタンをクリックするとテーブルデータが動的に表示されるデータテーブルが1つあります。FromDataからTodataにデータが来ます。すべてのsearcgボタンをクリックするとテーブルがクリアされます新しいデータが古いデータに追加されず、使用しているテーブルをクリアしない$('#yourTableId').dataTable().fnClearTable();
しかし、問題はこの "fbClearTable();"エクスポートボタン(印刷とExcel)が表示されません。エクスポートボタン(印刷とExcel)がデータテーブルに入っていません
var inittable = function() {
var finance = $('#financetbl');
var ofinance = finance.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"zeroRecords": "No matching records found"
},
buttons: [{
extend: 'print',
className: 'btn dark btn-outline'
}, {
extend: 'excel',
className: 'btn yellow btn-outline '
}],
responsive: false,
//"ordering": false, disable column ordering
//"paging": false, disable pagination
colReorder: {
reorderCallback: function() {
console.log('callback');
}
},
\t \t \t \t
\t \t \t \t "order": [
[0, 'asc']
],
"lengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength":10,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
});
}
$('#paymentdetails').click(function(){
\t \t \t \t \t if($(".datepickerInputFROM").val() > $(".datepickerInputTO").val())
\t \t \t \t \t \t {
\t \t \t \t \t \t alertify.alert('From Date should not be greater than To Date')
\t \t \t \t \t \t return false;
\t \t \t \t \t \t $(".datepickerInputFROM").val ="";
\t \t \t \t \t \t }
\t \t \t \t \t var getData = basePath +'AdminFinance/GetStudentPaymentsForDate/?FromDate='+$(".datepickerInputFROM").val() + '&ToDate='+$(".datepickerInputTO").val()
\t \t \t \t \t
\t \t \t \t \t if (($(".datepickerInputFROM").val() == "") && ($(".datepickerInputTO").val() == ""))
\t \t \t \t \t {
alertify.alert('Please select dates to proceed.')
\t \t \t \t \t \t \t return false;
\t \t \t \t \t } else if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == ""))
\t \t \t \t \t {
alertify.alert('Please select dates to proceed.')
\t \t \t \t \t \t \t return false;
\t \t \t \t \t }
\t \t \t \t
\t \t \t \t $.ajax({
url: getData
, async: false
, success: function (response) {
// alert(response[0]);
//$('#financetbl tbody').empty();
\t \t \t \t \t \t $("#financetbl").dataTable().fnClearTable();
\t \t \t \t \t \t \t
// if (response.resultCourse != '' && response[0]!= 'null') {
\t \t \t \t \t \t if (response.length > 0) {
var tr;
for (var i = 0; i < response.length; i++) {
tr = '<tr>'
tr += "<td>" + response[i].transactionDate+ "</td>";
tr += "<td>" + response[i].applicationNumber+ "</td>";
tr += "<td>" + response[i].applicantName+ "</td>"
tr += '</tr>'
$("#financetbl").dataTable().fnAddData($(tr));
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t inittable();
console.log(response)
\t \t \t \t \t \t \t
}
else {
\t \t \t \t \t \t \t \t console.log(response)
alertify.alert("Error : No Payments Details Found");
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t
}
}
});
\t \t \t \t });
私は、コードボタンから$('#yourTableId').dataTable().fnClearTable();
を削除するたびにこの方法に従ってきたが$('#yourTableId').dataTable().fnClearTable(); buttons are coming.
これはテーブルを破壊し、これによってもボタンが表示されません。 –
はい、要求データの後、再度データテーブルを呼び出します。私はそれがあなたの要求に達することができると思う – xiaoxiaosu
あなたは私を助けてくれますか?この問題を解決するには –