大佬教程收集整理的这篇文章主要介绍了jquery – 显示两个搜索框和分页数据的数据表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
更新
这是整个页面：
<!DOCTYPE html>
<html class="no-js">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Project name</title>
<Meta name="description" content="">
<Meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/png" href="/static/images/favicon.ico" />
<!-- For third-generation iPad with high-resolution ReTina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/images/apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution ReTina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/images/apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/images/apple-touch-icon-72x72-precomposed.png">
<!-- For non-ReTina iPhone,iPod Touch,and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/static/images/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="/static/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/static/css/main.css">
<script src="/static/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">VBEnergyZone</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="/">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools<b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/core/customers/">Customers</a></li>
<li><a href="/core/meters/">Meters</a></li>
<li><a href="/core/price_requests/">Price requests</a></li>
<li><a href="/core/suppliers/">suppliers</a></li>
<li><a href="/core/supplier_groups/">supplier groups</a></li>
<li><a href="/core/utilities/">Utilities</a></li>
</ul>
</li>
<li><a href="/core/user_profiles/">User Profiles</a></li>
<li><a href="/admin">Django Admin</a></li>
</ul>
<div class="pull-right">
<ul class="nav">
<li><a href="/about"><i class="icon-info-sign icon-white"></i> About</a></li>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-star"></i> eevenson<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/core/user_profiles/eevenson/">Profile</a></li>
<li><a href="/accounts/password_change/">Change password</a></li>
<li><a href="/accounts/logout/">Log out</a></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class='messages'>
</div>
<h2>A Test Customer</h2>
<h3>Customer</h3>
<form action="" id="form" enctype="multipart/form-data" method="post">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='NCQ15jA7erX5dAbx20Scr3gWxgaTn3Iq' /> </div><ul class='nav nav-tabs'><li class='active'><a class='tab' href='#tab0' data-toggle='tab'>Basic information</a></li><li><a class='tab' href='#tab1' data-toggle='tab'>Meters</a></li><li><a class='tab' href='#tab2' data-toggle='tab'>Emails</a></li><li><a class='tab' href='#tab3' data-toggle='tab'>Phone numbers</a></li><li><a class='tab' href='#tab4' data-toggle='tab'>LOCATIOns</a></li><li><a class='tab' href='#tab5' data-toggle='tab'>Documents</a></li><li><a class='tab' href='#tab6' data-toggle='tab'>Managers</a></li></ul></hr><div
class="tab-content" ><div
class="tab-pane active" id="tab0"><div
class="row" ><div
class="span4" ><div id="div_id_name" class="control-group"><label for="id_name" class="control-label requiredField">
Name<span class="asteriskField">*</span></label><div class="controls"><input name="name" value="A Test Customer" class="span4 texTinput texTinput" maxlength="128" type="text" id="id_name" /> </div></div><div id="div_id_legal_name" class="control-group"><label for="id_legal_name" class="control-label ">
Legal name
</label><div class="controls"><input id="id_legal_name" type="text" class="span4 texTinput texTinput" name="legal_name" maxlength="128" /> </div></div><div id="div_id_tags" class="control-group"><label for="id_tags" class="control-label ">
Tags
</label><div class="controls"><input id="id_tags" type="text" class="span4 tagwidget" name="tags" /> <p id="hint_id_tags" class="Help-block">A comma-separated list of tags.</p></div></div></div><div
class="span4" ><div id="div_id_duns_number" class="control-group"><label for="id_duns_number" class="control-label ">
Duns number
</label><div class="controls"><input id="id_duns_number" type="text" class="span4 texTinput texTinput" name="duns_number" maxlength="9" /> </div></div><div id="div_id_taxpayer_id_number" class="control-group"><label for="id_taxpayer_id_number" class="control-label ">
Taxpayer id number
</label><div class="controls"><input id="id_taxpayer_id_number" type="text" class="span4 texTinput texTinput" name="taxpayer_id_number" maxlength="9" /> </div></div><div id="div_id_customer_type" class="control-group"><label for="id_customer_type" class="control-label ">
Customer type
</label><div class="controls"><SELEct id="id_customer_type" class="span4 SELEct" name="customer_type"><option value="" SELEcted="SELEcted">---------</option><option value="MUNI">Munincipality</option><option value="SCDT">School DiStrict</option><option value="UNIV">University</option></SELEct></div></div></div><div
class="span4" ><div id="div_id_active" class="control-group"><div class="controls"><label for="id_active" class="checkBox "><input id="id_active" checked="checked" type="checkBox" class="span4 checkBoxinput" name="active" />
Active
</label></div></div></div></div></div><div
class="tab-pane" id="tab1"><div
class="row" ><div
class="span4" ><div id="div_id_meter_textarea" class="control-group"><label for="id_meter_textarea" class="control-label ">
List of meters
</label><div class="controls"><textarea id="id_meter_textarea" rows="10" cols="40" name="meter_textarea" class="span4 textarea"></textarea><p id="hint_id_meter_textarea" class="Help-block">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.</p></div></div></div><div
class="span4" ><div id="div_id_utility" class="control-group"><label for="id_utility" class="control-label ">
Utility
</label><div class="controls"><SELEct id="id_utility" class="span4 SELEct" name="utility"><option value="" SELEcted="SELEcted">---------</option></SELEct></div></div></div><div
class="span4" ></div></div><fieldset><legend>Meters</legend><input type="hidden" name="meters-@R_865_10586@L_FORMS" value="0" id="id_meters-@R_865_10586@L_FORMS" /> <input type="hidden" name="meters-INITIAL_FORMS" value="0" id="id_meters-INITIAL_FORMS" /><input type="hidden" name="meters-MAX_NUM_FORMS" id="id_meters-MAX_NUM_FORMS" /> <table id="meters" class="formsetTable"><thead><tr><th>ESI ID</th><th>Utility</th><th class="vbNoSearchSort">delete?</th></tr></thead><tbody></tbody></table></fieldset></hr></div><div
class="tab-pane" id="tab2"><div
class="row" ><div
class="span4" ></div><div
class="span4" ></div><div
class="span4" ></div></div><fieldset><legend>Emails</legend><input type="hidden" name="emails-@R_865_10586@L_FORMS" value="1" id="id_emails-@R_865_10586@L_FORMS" /> <input type="hidden" name="emails-INITIAL_FORMS" value="0" id="id_emails-INITIAL_FORMS" /><input type="hidden" name="emails-MAX_NUM_FORMS" id="id_emails-MAX_NUM_FORMS" /> <table id="emails" class="formsetTable"><thead><tr><th>Email</th><th>Email type</th><th class="vbNoSearchSort">delete?</th></tr></thead><tbody><tr class="row1"><td><input id="id_emails-0-email" type="text" name="emails-0-email" maxlength="75" /> </td><td><input id="id_emails-0-email_type" type="text" name="emails-0-email_type" maxlength="128" /> </td><td><input type="hidden" name="emails-0-id" id="id_emails-0-id" /> <input type="checkBox" name="emails-0-deletE" id="id_emails-0-deletE" /></td></tr></tbody><tfoot><tr style="display:none;" class="template"><td><input id="id_emails-NUM-email" type="text" name="emails-NUM-email" maxlength="75" /> </td><td><input id="id_emails-NUM-email_type" type="text" name="emails-NUM-email_type" maxlength="128" /> </td><td><input type="hidden" name="emails-NUM-id" id="id_emails-NUM-id" /> <input type="checkBox" name="emails-NUM-deletE" id="id_emails-NUM-deletE" /></td></tr></tfoot></table></fieldset></hr><input class='addEmail btn btn-priMary' name="addRow" value="Add row" /> </div><div
class="tab-pane" id="tab3"><div
class="row" ><div
class="span4" ></div><div
class="span4" ></div><div
class="span4" ></div></div></div><div
class="tab-pane" id="tab4"><div
class="row" ><div
class="span4" ></div><div
class="span4" ></div><div
class="span4" ></div></div></div><div
class="tab-pane" id="tab5"><div
class="row" ><div
class="span4" ></div><div
class="span4" ></div><div
class="span4" ></div></div></div><div
class="tab-pane" id="tab6"><div
class="row" ><div
class="span4" ></div><div
class="span4" ></div><div
class="span4" ></div></div></div></div>
<div class="btn-toolbar">
<input class='btn btn-priMary' type="submit" name="submit" value="Submit changes" />
<a href="/core/customers/" class="btn btn-priMary">Cancel</a>
</div>
</form>
<hr/>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="/static/js/vendor/bootstrap.min.js"></script>
<script src="/static/js/main.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
/* 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,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" },"sPaginationType": "full_numbers"
}
);
} );
</script>
<script>
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('',function(data){
// var messages = $('.messages',data);
// $('.messages').replaceWith(messages);
// });
return false;
} );
emailsTable = $('#emails').dataTable();
metersTable = $('#meters').dataTable();
} );
$('.addEmail').click(function(){
var type = 'emails'
var @R_865_10586@l = $('#' + typE).dataTable().fnSetTings().fnRecords@R_865_10586@l();
var tablEID = $('#'+ typE).attr('id');
var template = new Array();
$('#'+tablEID+' tfoot tr.template td')
.clone()
.each(function(){
$(this).html($(this).html().replace(/NUM/g,@R_865_10586@l));
})
.each(function(){
template.push($(this).html());
});
$('#'+tablEID).dataTable().fnAddData(templatE);
@R_865_10586@L++;
$('#id_' + type + '-@R_865_10586@L_FORMS').val(@R_865_10586@l);
});
</script>
</body>
</html>
为什么在提交后向表#emails添加行会导致重复的数据表控件？
由于某种原因,数据表正在另一个div #emails_wrapper中嵌入div #emails_wrapper.
以上是大佬教程为你收集整理的jquery – 显示两个搜索框和分页数据的数据表全部内容，希望文章能够帮你解决jquery – 显示两个搜索框和分页数据的数据表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。