0
私はアプリケーションでdatatablesを使用していますが、うまく機能しますが、テーブルの個々のカラムを検索する機能を実装したいと思います。私はthis pageが見つかりましたが、ハードコードされたデータの例で動作するようになることができますが、私は特定のコードに適用する際に問題を抱えています（私はテーブルに値を入れるためにAPIを使用しています）。個々の列を検索せずに動作する私の現在のコードは、以下のとおりです。datatables個々のカラム検索機能
$(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>
問題は何ですか？あなたが共有するリンク内の例には、すべての列の検索が含まれています。それはあなたが探しているものです。ご指定ください。 – MKR
はい私は知っていますが、リンクされた例のjavascriptを自分のコードに適用しようとしているときに、それを動作させることができません。 – JohnNewbie
あなたの質問にはうまくいかない、あなたが適用しようとしているJavaScriptを含めることができますか？ –