如何解决无法将行动态添加到Jquery数据表
我正在jquery数据表中执行2个功能。
- 根据选择的标签搜索和过滤表。
- 通过ajax将行动态添加到数据表中。
当我添加行时,尽管将行添加到表中并且行数在分页中增加,但是由于搜索功能,表显示空行。刷新表格后,便可以看到所有行。我发现主要问题出在 $。fn.dataTable.ext.search.push()函数中,这是由于 table.rows.add($ trHTML).draw();导致的。 不起作用。由于无法解决的搜索功能,正在创建某些依赖项。请提供一些解决建议。
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请求),就像我在本示例中所做的那样,我想向您推荐这个网站 {{3 }}
快乐编码!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。