TA貢獻1784條經驗 獲得超8個贊
我用我的一個小存儲庫創建了一個小示例，希望它能幫助您解決問題：
var table = $('#example').DataTable({
"bLengthChange": false,
//searching: false,
pageLength: 3,
dom: 'tip'
});
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
var filterCategory= $("#cato option:selected").text().toUpperCase();
var filterSubCategory= $("#subo option:selected").text().toUpperCase();
var subCategory = String(data[2]).toUpperCase();
var category = String(data[3]).toUpperCase();
//console.log(filterSubCategory);
if(filterSubCategory != "-SELECT SUBCATEGORY-") {
if ( filterCategory == category && filterSubCategory == subCategory)
return true;
}
else if(filterCategory != "-SELECT CATEGORY-") {
if ( filterCategory == category)
return true;
}
return false;
}
);
$('#cato').on('change', function() {
$('#subo').val("");
table.draw();
});
$('#subo').on('change', function() {
table.draw();
});
function getInfo() {
var $subCategory = $("#subo option:selected").text()
$.ajax({
type:'GET',
url: "https://my-json-server.typicode.com/SagnalracSO/repo/items?subcategory=" + $subCategory,
/*data:{
name:$('#name').val(),
desc:$('#desc').val(),
category:$("#catoo option:selected").text(),
,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},*/
dataType: "json",
beforeSend: function(jqXHR, settings) {
if($subCategory.toUpperCase() == '-SELECT SUBCATEGORY-') {
alert('Select a SubCategory');
jqXHR.abort();
}
},
success: function(data) {
var item = data[0];
var jRow = $("<tr>").append("<td>" + item.id + "</td><td>" + item.product + "</td><td>" + item.subcategory + "</td><td>" + item.category + "</td>").append("</tr>");
table.row.add(jRow).draw();
}
});
}
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<select id="cato" class="form-control" >
<option value="" disabled selected="true">-Select Category-</option>
<option>Electronics</option>
<option>Sports</option>
</select>
<select id="subo" class="form-control">
<option value="" disabled selected="true">-Select Subcategory-</option>
<option>Laptop</option>
<option>Mobile</option>
</select>
<table id="example" class="table display">
<thead>
<tr>
<th>Id</th>
<th>Product</th>
<th>Subcategory</th>
<th>Category</th>
</tr>
</thead>
<tbody id="r">
<tr>
<td>1</td>
<td>Samsung</td>
<td>Mobile</td>
<td>Electronics</td>
</tr>
<tr>
<td>2</td>
<td>Racket</td>
<td>Tennis</td>
<td>Sports</td>
</tr>
<tr>
<td>3</td>
<td>Bat</td>
<td>Cricket</td>
<td>Sports</td>
</tr>
<tr>
<td>4</td>
<td>Dell</td>
<td>Laptop</td>
<td>Electronics</td>
</tr>
<tr>
<td>5</td>
<td>Iphone</td>
<td>Mobile</td>
<td>Electronics</td>
</tr>
<tr>
<td>6</td>
<td>Soccer Ball</td>
<td>Soccer</td>
<td>Sports</td>
</tr>
</tbody>
</table>
<br><br>
<input type="button" value="ADD ROWS" onClick="getInfo()" />
如果您的 Ajax 請求返回多條記錄，那么您可以替換為：
var item = data[0];
var jRow = $("<tr>").append("<td>" + item.id + "</td><td>" + item.product + "</td><td>" + item.subcategory + "</td><td>" + item.category + "</td>").append("</tr>");
table.row.add(jRow).draw();
有了這個：
for (var item in data) {
var item = data[item];
var jRow = $("<tr>").append("<td>" + item.id + "</td><td>" + item.product + "</td><td>" + item.subcategory + "</td><td>" + item.category + "</td>").append("</tr>");
table.row.add(jRow).draw();
}
順便說一句，如果將來你想創建涉及調用 API（通過 Ajax 請求）的示例，就像我在這個示例中所做的那樣，我想向你推薦這個網站JSONPlaceholder
舉報