Datatable.Draw not working neither ny other function like destroy please help
Datatable.Draw not working neither ny other function like destroy please help
m_omin
Posts: 1Questions: 1Answers: 0
@{
Layout = "~/Views/Shared/_Dashboard.cshtml";
if (Session["username"] == null)
{
Response.Redirect("~/User/Index");
}
ViewBag.Title = "Analysis";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Expense Analysis</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="dates" style="width:500px;margin-left:20px">
<div>
<label for="min">Min:</label>
<input id="from_date" name="from_date">
</div>
<div>
<label for="max">Max : </label>
<input id="to_date" name="to_date">
</div>
<div>
<button id="submit" style="height:30px;border:solid;border-width:thin;border-radius:10px;font-size:small " class="btn btn-success" onclick="Redraw();">Submit</button>
</div>
</div>
@*</form>*@
<div style="width: 500px" id="expense">
<table class="cell-border display compact" id="expense1" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;width:80%">
<thead style="background-color:black; color:white">
<tr>
<th>Category</th>
<th>Tdate</th>
<th>Expense</th>
<th>VDesc</th>
</tr>
</thead>
<tbody>
<tfoot>
<tr>
<th style="text-align: left"></th>
<th style="text-align:right">Total : </th>
<th style="text-align: left"></th>
<th style="text-align: left"></th>
</tr>
</tfoot>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css">
<link rel="stylesheet" href="https://resources/demos/style.css">
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
processing: true,
url: "/Analysis/ajax1",
dataSrc: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
var expense1 = $("#expense1").DataTable(
{
"footerCallback": function(row, data, start, end, display) {
var api = this.api(),
data;
// console.log(api);
expense1 = api
.column(2)
.data().reduce(function(a, b) {
return parseFloat(a) + parseFloat(b);
},0);
expense1 = $.fn.dataTable.render.number(',', 3, ).display(expense1);
$(api.column(2).footer()).html(
expense1
);
},
bLengthChange: true,
lengthMenu: [[10, -1], [10, "All"]],
bFilter: false,
bSort: false,
bInfo : false,
bPaginate: true,
data: response,
columns: [{ "data": "Category" },
{ "data": "varDate"},
{ "data": "Amount", render: $.fn.dataTable.render.number(',', 3, ) },
{"data": "VDesc"}]
});
};
function refreshDataTable() {
expense1.draw();
};
$('#from_date').datepicker({
onSelect: function() {
$('#from_date').attr('value', this.value);
refreshDataTable();
},
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
$('#to_date').datepicker({
onSelect: function() {
$('#to_date').attr('value', this.value);
refreshDataTable();
},
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var startDate = new Date(currYear, currMonth, 1);
$("#from_date").datepicker("setDate", startDate);
$('#to_date').datepicker('setDate', 'today');
</script>
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
You posted a lot of code with a description of the exact problem. Please provide more details of the problem. What exactly happens? Do you get alert or console log errors? Better is a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin