我在我的应用程序中使用数据表并且它运行良好，但是我想实现搜索表中各个列的功能。我发现this page并可以让它与硬编码数据示例一起使用，但是我在将其应用到我的特定代码时遇到了麻烦(我正在使用 api 来填充表)。我当前的代码无需单独的列搜索即可工作，如下所示，提前致谢。
$(document).ready(function() {
var table = $("#notifications").DataTable({
ajax: {
url: "/api/notification",
dataSrc: ""
},
columns: [{
data: "id",
render: function(data, type, notification) {
return "<a href='/notifications/NewSubmission/" + notification.id + "'>" + notification.id + "</a>";
}
},
{
data: "address1",
},
{
data: "address2",
},
{
data: "address3",
},
{
data: "town",
},
{
data: "county",
},
{
data: "postCode",
},
{
data: "local.name",
},
{
data: "id",
render: function(data) {
return "<button class='btn-link js-delete' data-notification-id=" + data + ">Delete</button>";
}
}
]
});
$("#notifications").on("click", ".js-delete", function() {
var button = $(this);
bootbox.confirm("Are you sure you want to delete this notification?", function(result) {
if (result) {
$.ajax({
url: "/api/notification/" + button.attr("data-notification-id"),
method: "DELETE",
success: function() {
table.row(button.parents("tr")).remove().draw();
}
});
}
});
});
});<h2>Index</h2>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Individual column searching (text inputs)</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=170d96f69db52446b9aa21d2653da1f4">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<style type="text/css" class="init">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="/media/js/site.js?_=2ec2144600499da11df5c1cee6ac09df">
</script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fapi%2Fmulti_filter.html" async>
</script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<table id="notifications" class="table table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Address Line 1</th>
<th>Address Line 2</th>
<th>Address Line 3</th>
<th>Town</th>
<th>County</th>
<th>Post Code</th>
<th>Local Authority</th>
<th>Delete</th>
</tr>
</thead>
</table>最佳答案
工作版本
<h2>Index</h2>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Individual column searching (text inputs)</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=170d96f69db52446b9aa21d2653da1f4">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<style type="text/css" class="init">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="/media/js/site.js?_=2ec2144600499da11df5c1cee6ac09df">
</script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fapi%2Fmulti_filter.html" async>
</script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" class="init">
$(document).ready(function () {
$('#notifications tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var table = $("#notifications").DataTable({
ajax: {
url: "/api/notification",
dataSrc: ""
},
columns: [
{
data: "id",
render: function (data, type, notification) {
return "<a href='/notifications/NewSubmission/" + notification.id + "'>" + notification.id + "</a>";
}
},
{
data: "address1",
},
{
data: "address2",
},
{
data: "address3",
},
{
data: "town",
},
{
data: "county",
},
{
data: "postCode",
},
{
data: "local.name",
},
{
data: "id",
render: function (data) {
return "<button class='btn-link js-delete' data-notification-id=" + data + ">Delete</button>";
}
}
]
});
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
$("#notifications").on("click", ".js-delete", function () {
var button = $(this);
bootbox.confirm("Are you sure you want to delete this notification?", function (result) {
if (result) {
$.ajax({
url: "/api/notification/" + button.attr("data-notification-id"),
method: "DELETE",
success: function () {
table.row(button.parents("tr")).remove().draw();
}
});
}
});
});
</script>
<table id="notifications" class="table table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Address Line 1</th>
<th>Address Line 2</th>
<th>Address Line 3</th>
<th>Town</th>
<th>County</th>
<th>Post Code</th>
<th>Local Authority</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Address Line 1</th>
<th>Address Line 2</th>
<th>Address Line 3</th>
<th>Town</th>
<th>County</th>
<th>Post Code</th>
<th>Local Authority</th>
<th>Delete</th>
</tr>
</tfoot>
</table>
关于javascript - 数据表单列搜索功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45565046/