Question

我有一个数据表，数据来自后端。数据基于FromDate到ToDate，在表格中我们可以对数据进行排序。但是当FromDate到ToDate之间没有数据时，我显示“我的表中没有找到数据”但是当我点击表头上的排序图标时桌子本身并不令人耳目一新。

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' );
                }
            },
				
				"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>>",
            });
        }

表的jquery和Ajax代码： -

 $('#paymentdetails').click(function(){
					if( $(".datepickerInputFROM").val() > $(".datepickerInputTO").val())
						{
						alertify.alert('From Date should not be greater than  To Date')
						return false;
						$(".datepickerInputFROM").val ="";
						}
					var getData = basePath +'AdminFinance/GetStudentPaymentsForDate/?FromDate='+$(".datepickerInputFROM").val() + '&ToDate='+$(".datepickerInputTO").val()
					  
					  if (($(".datepickerInputFROM").val() == "") && ($(".datepickerInputTO").val() == ""))
					  { 
                            alertify.alert('Please select dates to proceed.')
							return false;
					  } else if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == ""))
					  { 
                            alertify.alert('Please select dates to proceed.')
							return false;
					  }
				
                     
                   
				$.ajax({
                        url: getData 
                        , async: false
                        , success: function (response) {
                           //  alert(response[0]);
                            //$('#financetbl tbody').empty();
							$('#financetbl tbody').empty();
							
                           // if (response.resultCourse != '' && response[0]!= 'null') {
						    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 tbody').append(tr);
								}
								
								inittable();
                               console.log(response)
							  
                            }
                            else {
								console.log(response)
                                alertify.alert("Error : No Payments Details Found");
								
								inittable();
								
                            }
                        }
                    });
				});

我尝试过以下选项，但没有任何对我有用。

`$("#tbodyID tr").detach();
$("#tbodyID tr").remove();
$("#tbodyID").empty();
$("#tbodyID").html("");
$("tbody").empty();
$("tbody").html("");
$('#table').dataTable().fnDraw(false)`

Answer 1

如果没有数据，您想要取消初始化表格数据吗？试试这个吗？

// destroy first
$('#yourTableId').dataTable().fnDestroy();
// then initialize table again
$('#yourTableId').dataTable({ ... });

Answer 2

要清除表分页和初始化表：

$('#DT_GRID').dataTable().fnDestroy(); 
$('#DT_GRID').DataTable(); 
$('.dataTables_length').addClass('bs-select');'

单击按钮后如何清除dataTable主体

2 个答案: