如何重绘jquery数据表? [英] How to redraw jquery datatable?
本文介绍了如何重绘jquery数据表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
//start job schedule
function nth(d) { if (d > 3 && d < 21) return 'th'; switch (d % 10) { case 1: return "st"; case 2: return "nd"; case 3: return "rd"; default: return "th"; } }
function dateToYMD(date) { var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var d = date.getDate(); var m = strArray[date.getMonth()]; var y = date.getFullYear(); return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y; }
Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; }
function pad(str) { return (" "+str).slice(-2) }
//var cnt = 0;
var dataSet = [];
function printNextPeriod(startDate, endDate, periodInDays,cnt) {
var numWorkDays = 0;
var currentDate = new Date(startDate);
var premises = "Innovation Building in DMC";
var Time = "Day";
var typeoftreatment = "Residual-spray / Dust / bait & Traps"
while (numWorkDays < periodInDays && currentDate <= endDate) {
currentDate = currentDate.addDays(1);
// Skips friday
if (currentDate.getDay() !== 5) {
numWorkDays++;
}
if (numWorkDays == periodInDays) {
numWorkDays = 0;
cnt++;
let date = dateToYMD(currentDate);
let pos = holidays.indexOf(date);
if (pos != -1) {
console.log("replace",date,"with",instead[pos])
date = instead[pos];
}
let treatment = pad(cnt) + nth(cnt) + (cnt == 1 ? " Basic" : " Control") + " Treatment"
dataSet.push([premises, typeoftreatment, treatment, date, Time])
}
}
}
var holidays = [];//assign holidays days here
var instead = [];
holidays.forEach((hol,i) => {
let d = new Date(hol);
let date = d.getDate() + 1
d.setDate(date); // next day (could be Weekend);
while (d.getDay() === 5) {
date++;
d.setDate(date); // is any day not friday ok?
}
instead.push(dateToYMD(d))
holidays[i] = dateToYMD(new Date(hol))
})
$('.jobshepest').on('shown.bs.modal', function (e) {
$('.examplejobshecdule').DataTable({
destroy: true,
data: dataSet,
columns: [
{ title: "Premises" },
{ title: "Type of treatment" },
{ title: "Frequency" },
{ title: "Date" },
{title: "Time"}],
order: [[2, "asc"]],
columnDefs: [
{ width: "23%", targets: 3 }
]
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('/assets/demo/sam.css');?>" media="all"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<script src="<?php echo base_url('assets/demo/sam.js');?>"></script>
<div class="modal fade jobshepest" id="viewactipestmodal" role="document">
<div class="modal-dialog modal-lg" style="overflow-y: initial !important">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalschedulepest">schedule report pest</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- <form id="newModalFormviewschedpest" name="viewschedulepest" role="form" autocomplete="off">
<fieldset disabled="disabled">
<div class="period" style="float:left; padding: 5px; text-align:right; font-family: monospace;" id="first">Date<hr/>
</div>
<div class="period" style="float:left; padding: 5px; text-align:right; font-family: monospace;" id="second">Frequency<hr/></div>
</fieldset>
</form>-->
<table id="examplejobshecdule" class="table table-striped table-bordered examplejobshecdule" style="width:100%">
<tfoot>
<tr>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<button onclick="printNextPeriod(new Date('2019-01-01'), new Date('2020-01-01'),26,0);" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">1st button</button>
<button onclick="printNextPeriod(new Date('2019-01-01'), new Date('2019-12-31'),15,0);" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">2nd button</button>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
当我单击第一个按钮时，将打开弹出模式并显示结果(通过调用函数进行调用)- 12个条目 关闭模态后，尝试单击第二个按钮，
when i click the first button, popup modal will open and results will show (calling through calling a function) - 12 entries is there after closing the modal and try to click the 2nd button,
点击第二个按钮时，参数中会传递另一个日期- 有 20个条目.但是问题是出现了12 + 20 = 32个条目.它错了.如何解决?我需要在第一次单击时显示12个条目，在第二次单击时显示20个条目
when second button clicks, another dates are passing in the argument- 20 entries is there. But the problem is 12+20=32 entries are showing up..ITs wrong..How to fix it??I need to show 12 entries for the 1st button clicks and 20 entries for the second button clicks everytime
我尝试了重绘，fndestry和所有..它不起作用.
i tried redraw, fndestry and all ..its not working.
有人可以帮助我做到这一点吗?
can anyone plz help me to do this?
推荐答案
每次单击按钮时，函数printNextPeriod会将新数据推送到dataSet.我在printNextPeriod中添加了dataSet = [];以重置数据.
The function printNextPeriod pushed new data to dataSet everytime you clicked the button. I have added dataSet = []; inside printNextPeriod to reset the data.
//start job schedule
function nth(d) { if (d > 3 && d < 21) return 'th'; switch (d % 10) { case 1: return "st"; case 2: return "nd"; case 3: return "rd"; default: return "th"; } }
function dateToYMD(date) { var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var d = date.getDate(); var m = strArray[date.getMonth()]; var y = date.getFullYear(); return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y; }
Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; }
function pad(str) { return (" "+str).slice(-2) }
//var cnt = 0;
var dataSet = [];
function printNextPeriod(startDate, endDate, periodInDays,cnt) {
dataSet = [];
var numWorkDays = 0;
var currentDate = new Date(startDate);
var premises = "Innovation Building in DMC";
var Time = "Day";
var typeoftreatment = "Residual-spray / Dust / bait & Traps"
while (numWorkDays < periodInDays && currentDate <= endDate) {
currentDate = currentDate.addDays(1);
// Skips friday
if (currentDate.getDay() !== 5) {
numWorkDays++;
}
if (numWorkDays == periodInDays) {
numWorkDays = 0;
cnt++;
let date = dateToYMD(currentDate);
let pos = holidays.indexOf(date);
if (pos != -1) {
console.log("replace",date,"with",instead[pos])
date = instead[pos];
}
let treatment = pad(cnt) + nth(cnt) + (cnt == 1 ? " Basic" : " Control") + " Treatment"
dataSet.push([premises, typeoftreatment, treatment, date, Time])
}
}
}
var holidays = [];//assign holidays days here
var instead = [];
holidays.forEach((hol,i) => {
let d = new Date(hol);
let date = d.getDate() + 1
d.setDate(date); // next day (could be Weekend);
while (d.getDay() === 5) {
date++;
d.setDate(date); // is any day not friday ok?
}
instead.push(dateToYMD(d))
holidays[i] = dateToYMD(new Date(hol))
})
$('.jobshepest').on('shown.bs.modal', function (e) {
$('.examplejobshecdule').DataTable({
destroy: true,
data: dataSet,
columns: [
{ title: "Premises" },
{ title: "Type of treatment" },
{ title: "Frequency" },
{ title: "Date" },
{title: "Time"}],
order: [[2, "asc"]],
columnDefs: [
{ width: "23%", targets: 3 }
]
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('/assets/demo/sam.css');?>" media="all"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<script src="<?php echo base_url('assets/demo/sam.js');?>"></script>
<div class="modal fade jobshepest" id="viewactipestmodal" role="document">
<div class="modal-dialog modal-lg" style="overflow-y: initial !important">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalschedulepest">schedule report pest</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- <form id="newModalFormviewschedpest" name="viewschedulepest" role="form" autocomplete="off">
<fieldset disabled="disabled">
<div class="period" style="float:left; padding: 5px; text-align:right; font-family: monospace;" id="first">Date<hr/>
</div>
<div class="period" style="float:left; padding: 5px; text-align:right; font-family: monospace;" id="second">Frequency<hr/></div>
</fieldset>
</form>-->
<table id="examplejobshecdule" class="table table-striped table-bordered examplejobshecdule" style="width:100%">
<tfoot>
<tr>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<button onclick="printNextPeriod(new Date('2019-01-01'), new Date('2020-01-01'),26,0);" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">1st button</button>
<button onclick="printNextPeriod(new Date('2019-01-01'), new Date('2019-12-31'),15,0);" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">2nd button</button>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
这篇关于如何重绘jquery数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
