[英]Unable to add row dynamically to Jquery datatable
我在 jquery 數據表中執行 2 個功能。
當我添加行時,雖然行被添加到表中並且行數在分頁中增加,但是由於搜索 function,表顯示 null 行。 刷新表格后,我就可以看到所有行。 我發現主要問題在於$.fn.dataTable.ext.search.push() function 由於 which table.rows.add($trHTML).draw(); 不管用。 由於搜索 function 而創建了一些依賴項,我無法解決。 請提供一些解決它的建議。
Html
<div class="container">
<form class="form-inline d-inline-flex mt-2 ml-2 align-items-start">
<div class="form-group">
<select id="cato" class="form-control input-sm shadow-none" >
<option disabled selected="true">-Category-</option>
{% for i in ch %}
<option value ="{{i.name}}">{{i.name}}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<select id="subo" class="form-control shadow-none">
<option disabled selected="true">-Subcategory-</option>
</select>
</div>
<!--Reset Button-->
<button type="submit" onclick="resettable()" class="btn btn-success"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Reset</button>
</form>
<button type="submit" id="bt" class="btn btn-success align-top m-2" data-toggle="modal" data-target="#modaledit" style="float:right !important"><i class="fa fa-plus" aria-hidden="true"></i> Add</button>
<div class="modal" tabindex="-1" role="dialog" id="modaledit" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><b>Add Product</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="background-color: #fffdd0;">
<!--Popup Form-->
<form id="form_post">
{% csrf_token %}
<div class="form-group">
<label>Name</label>
<input type="text" id="name" class="form-control" placeholder="Enter Product Name" name="name" spellcheck="false" required autocomplete="off">
</div>
<div class="form-group">
<label>Description</label>
<input type="text" id="desc" class="form-control" placeholder="Enter Description" name="desc" spellcheck="false" autocomplete="off">
</div>
<div class="form-group">
<label>Category</label>
<select id="catoo" class="form-control" name="category" required>
<option disabled selected="true">-Select Category-</option>
{% for i in ch %}
<option value ="{{i.name}}">{{i.name}}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label>Subcategory</label>
<select id="suboo" class="form-control" name="subcategory" required>
<option disabled selected="true">-Select Subcategory-</option>
</select><br/>
<input type="submit" class="btn btn-success" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="table-responsive" id="resp">
<table class="table table-bordered" id="example>
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Subcategory</th>
<th>Category</th>
</tr>
</thead>
<tbody id="r">
{% for i in pd %}
<tr>
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.subcategory}}</td>
<td>{{i.category}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
Jquery
<script>
var table = $('#example').DataTable({
"bLengthChange": false,
//searching: false,
pageLength: 5,
"order": [[ 0, "desc" ]],
dom: 'tip',
language : {
"zeroRecords": " "
},
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}]
});
table.column(0).visible(false);
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var filterCategory= $("#cato option:selected").text().toUpperCase();
let filterSubCategory= $("#subo option:selected").text().toUpperCase();
var subCategory = String(data[2]).toUpperCase();
var category = String(data[3]).toUpperCase();
if((filterSubCategory != "-SUBCATEGORY-")&&(filterSubCategory != "")) {
console.log("2",filterSubCategory);
if ( filterCategory == category && filterSubCategory == subCategory)
{
return true;
}
}
else if(filterCategory != "-CATEGORY-") {
console.log("1",filterCategory);
if ( filterCategory == category)
{
return true;
}
}
return false;
}
);
$('#cato').on('change', function() {
$('#subo').val("");
table.draw();
});
$('#subo').on('change', function() {
table.draw();
});
$(document).on("submit","#form_post",function(e){
e.preventDefault();
$.ajax({
type:'POST',
url: "{% url 'getdetails1' %}",
data:{
name:$('#name').val(),
desc:$('#desc').val(),
category:$("#catoo option:selected").text(),
subcategory:$("#suboo option:selected").text(),
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
dataType: "json",
success:function(data) {
var trHTML='';
$("#form_post")[0].reset();
$('#modaledit').modal('hide');
trHTML += '<tr><td>' + data[0].i + '</td><td>' +data[0].n + '</td><td>' + data[0].s + '</td><td>' +data[0].c + '</td></tr>';
table.rows.add($(trHTML)).draw();
console.log(data);
table.rows.add([data[0].i,data[0].n,data[0].s,data[0].c]);
table.draw();
}
});
});
</script>
我用我的一個小存儲庫創建了一個小示例,希望它可以幫助您解決問題:
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
快樂編碼!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.