DataTable重新加载

时间:2017-05-29 10:10:40

标签: javascript jquery ajax datatables

enter image description here



    
function  viewData(){

  $.ajax({
   
  url:'process.php?p=view',
  method: 'GET'
  
  }).done(function(data){
 $('#example-table').DataTable().destroy();
  $('tbody').html(data)
  tableData() 
  $('#example-table').DataTable({
	  
	    
        dom: 'Bfrtip',
        select: true,
        buttons: [

			'colvis',
			
			
			{
                extend: 'collection',
                text: '<span class="glyphicon glyphicon-export"></span> Export',
                buttons: [
                   
                    {
                extend: 'excelHtml5',
				text: '<i class="fa fa-file-excel-o"></i> Excel',
                exportOptions: {
                      columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15 ]
					
                }
            },
            {
                extend: 'pdfHtml5',
				text:'<i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF',
				 orientation: 'landscape',
                pageSize: 'LEGAL',
                exportOptions: {
                    columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15 ]
                }
            },
			 {extend:'csv',
			text:'<i class="fa fa-file-excel-o" aria-hidden="true"></i> Csv'
			
			},
			{extend:'print',
			text:'<i class="fa fa-print" aria-hidden="true"></i> Print'
			}	
                ]
            }
        ]
 
    });


  var datatableInstance = $('#example-table').DataTable()
 $('#example-table thead th').each(function () {
 var title =  $('#example-table thead th').eq($(this).index()).text();
   $(this).html('<input type="text" placeholder="' + title + '" />');
 });
 
 datatableInstance.columns().every(function () {
    var dataTableColumn = this;
    var searchTextBoxes = $(this.header()).find('input');

    searchTextBoxes.on('keyup change', function () {
        dataTableColumn.search(this.value).draw();
    });
	
	
 searchTextBoxes.on('click', function (e) {
        e.stopPropagation();
    });
  });
 
 
 
  })
  
}
function tableData(){
	  

$('#example-table').Tabledit({
    url: 'process.php',
   	eventType: 'dblclick',
      editButton: true,
	  deleteButton: true,
	  hideIdentifier: true,
	  scrollY:"300px",
      scrollX:true,
      scrollCollapse: true,
	  method: 'POST',
	  dataType: 'json',
      columns: {
      identifier: [0, 'id'],
       editable: [[8, 'division'], [9, 'qte1'],[10, 'qte2'],[11, 'qte3'],[13, 'bl']]
    },
 
    onSuccess: function(data, textStatus, jqXHR) {
  
    	
	viewData().ajax.reload();
    },
    onFail: function(jqXHR, textStatus, errorThrown) {
        console.log('onFail(jqXHR, textStatus, errorThrown)');
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    },
 
    onAjax: function(action, serialize) {

        console.log('onAjax(action, serialize)');
        console.log(action);
        console.log(serialize);
		
    }
});




}
&#13;
&#13;
&#13;

大家好。我会直言不讳。在我的DataTable中编辑一行并提交后,我的各个列搜索标题将不再与列可见性标题一起显示。请记住,我是jquery的新手。这是我的代码。我也收到错误 Uncaught TypeError:无法读取属性&#39; ajax&#39;未定义的引用行viewData().ajax.reload()。 提前感谢您的帮助。

0 个答案:

没有答案