数据表显示两个搜索框和分页数据

我正在尝试将数据表集成到我的项目中。 我的一个表有一个按钮来添加其他行。 我使用了这里显示的方法。 添加一行并提交结果后，我最终得到了双数据表控件，如下所示：

更新

这是整个页面：

                   body { padding-top: 60px; padding-bottom: 40px; }       
 
 
 VBEnergyZone 
 
 
Home
 
 Tools 
 
 
 
 Administration 
 
Customers
 
Meters
 
Price requests
 
Suppliers
 
Supplier groups
 
Utilities
 
 
 
User Profiles
 
Django Admin
 
 
 
 
 About
  eevenson 
 
Profile
 
Change password
 
Log out
 
 
 
 
 
 
 
 
 
 
 
A Test Customer
 
Customer
 
 
 
Basic information
Meters
Emails
Phone numbers
Locations
Documents
Managers
 Name*
 
 Legal name 
 
 Tags 
 
A comma-separated list of tags.
 Duns number 
 
 Taxpayer ID number 
 
 Customer type 
---------MunincipalitySchool DistrictUniversity
 Active 
 List of meters 
Enter meter ESI IDs one per line. Meters will become owned by customer. New meter ESI IDs will be created as necessary. Duplicate ESI IDs will be ignored. Meters owned by a different customer will change ownership.
 Utility 
---------
Meters
  
ESI ID
Utility
Delete?
Emails
  
Email
Email type
Delete?
 
 
 
 
 
 
 
 
  Cancel 
 
 
 
  window.jQuery || document.write('')        /* Create an array with the values of all the input boxes in a column */ $.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn ) { var aData = []; $( 'td:eq('+iColumn+') input:last', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () { aData.push( this.value ); } ); return aData; } /* Create an array with the values of all the select options in a column */ $.fn.dataTableExt.afnSortData['dom-select'] = function ( oSettings, iColumn ) { var aData = []; $( 'td:eq('+iColumn+') select:last', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () { aData.push( $(this).val() ); } ); return aData; } /* Create an array with the values of all the checkboxes in a column */ $.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn ) { var aData = []; $( 'td:eq('+iColumn+') input:last', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () { aData.push( this.checked==true ? "1" : "0" ); } ); return aData; } $(document).ready(function() { $('#meters').dataTable( { "aoColumns": [ null, null, { "sSortDataType": "dom-checkbox" }, ], "aoColumnDefs": [ { "aTargets": ["vbNoSearchSort"], "bSearchable": false, "bSortable": false } ], "bProcessing" :true, "bStateSave" :true, "sPaginationType": "full_numbers" } ); $('#emails').dataTable( { "aoColumns": [ { "sSortDataType": "dom-text" }, { "sSortDataType": "dom-text" }, { "sSortDataType": "dom-checkbox" }, ], "aoColumnDefs": [ { "aTargets": ["vbNoSearchSort"], "bSearchable": false, "bSortable": false } ], "bProcessing" :true, "bStateSave" :true, "sPaginationType": "full_numbers" } ); } );   var emailsTable; var metersTable; $(document).ready(function() { $('#form').submit( function() { var sData = emailsTable.$('input') .add(metersTable.$('input')) .add('input') .add('textarea') .add('select') .serialize(); $.post('', sData, function(data){$('body').html(data); }); // $.post('', sData, function(data){ // var messages = $('.messages', data); // $('.messages').replaceWith(messages); // }); return false; } ); emailsTable = $('#emails').dataTable(); metersTable = $('#meters').dataTable(); } ); $('.addEmail').click(function(){ var type = 'emails' var total = $('#' + type).dataTable().fnSettings().fnRecordsTotal(); var tableId = $('#'+ type).attr('id'); var template = new Array(); $('#'+tableId+' tfoot tr.template td') .clone() .each(function(){ $(this).html($(this).html().replace(/NUM/g,total)); }) .each(function(){ template.push($(this).html()); }); $('#'+tableId).dataTable().fnAddData(template); total++; $('#id_' + type + '-TOTAL_FORMS').val(total); });    

为什么在表#emails中添加行会在提交后导致重复的数据表控件？

由于某种原因，数据表在另一个div #emails_wrapper中嵌入了一个div #emails_wrapper。

Answer 1

我从Allan那里得到了一些有用的输入数据表 。 特别：

$（ ‘主体’）HTML（数据）;

您正在重写整个HTML正文的树 – 所以当您调用$（’＃email’）时，dataTable（）DataTables将检查该节点上是否已有表（注意它是节点检查，而不是ID检查） ），但是没有，因为你已经销毁它并重写它。 因此原始HTML仍然存在于旧表中，并且DataTables添加了一个新表，因为它是一个新的HTML表元素。

所以你需要在重写整个树之前销毁表，或者最好不要重写整个树，只需操作你想要更新的位。