Javascript 无法将行动态添加到Jquery datatable
我在jquery datatable中执行2个函数Javascript 无法将行动态添加到Jquery datatable,javascript,jquery,ajax,datatables,Javascript,Jquery,Ajax,Datatables,我在jquery datatable中执行2个函数 根据选择标记搜索和筛选表 通过ajax向datatable动态添加行 当我添加行时，虽然行被添加到表中，并且分页中的行数增加，但由于搜索功能，表显示空行。我一刷新表格就可以看到所有的行。我发现主要问题出在$.fn.dataTable.ext.search.push（）函数中，table.rows.add（$trHTML.draw（）不工作。由于我无法解决的搜索功能，正在创建某些依赖项。请提供一些解决建议 Html <div class=&
<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>
-类别-
{ch%中的i的%s}
{{i.name}
{%endfor%}
-子类别-
重置
添加
添加产品
&时代；
{%csrf_令牌%}
名称
描述
类别
-选择类别-
{ch%中的i的%s}
{{i.name}
{%endfor%}
子类别
-选择子类别-
我用我的一个小存储库创建了一个小示例，希望它能帮助您解决问题：
var table=$（'#示例'）.DataTable({
“bLengthChange”：false，
//搜索：假，
页长：3，
多姆：“小费”
});
$.fn.dataTable.ext.search.push（函数（设置、数据、数据索引）{
var filterCategory=$（“#cato选项：选中”）.text（）.toUpperCase（）；
var filterSubCategory=$（“#subo选项：选中”）.text（）.toUpperCase（）；
var subCategory=String（数据[2]）.toUpperCase（）；
var category=String（数据[3]）.toUpperCase（）；
//console.log（filterSubCategory）；
如果（过滤器子类别！=“-选择子类别-”）{
if（filterCategory==类别和filterSubCategory==子类别）
返回true；
}
else if（过滤器类别！=“-选择类别-”）{
if（过滤器类别==类别）
返回true；
}
返回false；
}
);
$（'#cato'）。on（'change'，function（）{
$（'#subo'）.val（“”）；
table.draw（）；
});
$（'#subo'）。on（'change'，function（）{
table.draw（）；
});
函数getInfo（）{
var$subCategory=$（“#subo选项：选中”）.text（）
$.ajax({
类型：'GET'，
url:“https://my-json-server.typicode.com/SagnalracSO/repo/items?subcategory=“+$子类别，
/*数据：{
名称：$（'#name'）.val（），
desc:$（'#desc'）.val（），
类别：$（“#catoo选项：选中”）.text（），
,
“csrfmiddlewaretoken”：“{csrf_令牌}”
},*/
数据类型：“json”，
发送前：函数（jqXHR，设置）{
如果（$subCategory.toUpperCase（）='-选择子类别-'）{
警报（“选择子类别”）；
jqXHR.abort（）；
}
},
成功：功能（数据）{
var项目=数据[0]；
var jRow=$（“”）.append（“+item.id+”+item.product+”+item.subcategory+“+item.category+”）.append（“”）；
table.row.add（jRow.draw（）；
}
});
}
-选择类别-
数码产品
体育
-选择子类别-
笔记本电脑
可移动的
身份证件
产品
子类别
类别
1.
三星
可移动的
数码产品
2.
球拍
网球
体育
3.
球棒
板球
体育
4.
戴尔
笔记本电脑
数码产品
5.
苹果手机
可移动的
数码产品
6.
足球
足球
体育
我用我的一个小存储库创建了一个小示例，希望它能帮助您解决问题：
var table=$（'#示例'）.DataTable({
“bLengthChange”：false，
//搜索：假，
页长：3，
多姆：“小费”
});
$.fn.dataTable.ext.search.push（函数（设置、数据、数据索引）{
var filterCategory=$（“#cato选项：选中”）.text（）.toUpperCase（）；
var filterSubCategory=$（“#subo选项：选中”）.text（）.toUpperCase（）；
var subCategory=String（数据[2]）.toUpperCase（）；
var category=String（数据[3]）.toUpperCase（）；
//console.log（filterSubCategory）；
如果（过滤器子类别！=“-选择子类别-”）{
if（filterCategory==类别和filterSubCategory==子类别）
返回true；
}
else if（过滤器类别！=“-选择类别-”）{
if（过滤器类别==类别）
返回true；
}
返回false；
}
);
$（'#cato'）。on（'change'，function（）{
$（'#subo'）.val（“”）；
table.draw（）；
});
$（'#subo'）。on（'change'，function（）{
table.draw（）；
});
函数getInfo（）{
var$subCategory=$（“#subo选项：选中”
<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>