I'm trying to figure out how to use dynatable. Currently, have a test web page with the minimal needed, using all the default dynatable settings, and a hard coded data set.
This will show the table. However, when I click on the column headers to sort the data it doesn't sort the rows in place. Instead it duplicates the rows and appends the duplicated rows to the end of the table.
So, if I start with
Animal
-----
Dog
Bird
Cat
I'll have this after clicking Animal.
Animal
------
Dog
Bird
Cat
Bird
Cat
Dog
Can someone help me get sorting to work correctly? Following is my code.
DynaTest.cshtml
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<title>DynaTest</title>
<link href="~/styles/jquery.dynatable.css" rel="stylesheet" />
</head>
<body style="background-color: lightgray;">
<div>
<form id="__AjaxAntiForgeryForm" action="#" method="post">
@Html.AntiForgeryToken()
</form>
<table id="tableTestDyno">
<thead>
<tr>
<th><div style="display: none;">Actions</div></th>
<th>
Name
</th>
<th>
Form
</th>
<th>
Status
</th>
<th>
Date Submitted
</th>
</tr>
</thead>
</table>
</div>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/jquery.dynatable.js"></script>
<script>
$(document).ready(function () {
$.ajaxSetup({
cache: false,
headers: { "__RequestVerificationToken": $("#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]").val() }
});
});
</script>
<script>
var records =
[
{
"actions": "edit",
"name": "Doe, Jane",
"form": "1",
"status": "Approved",
"dateSubmitted": "5/28/2019 12:47 PM"
}, {
"actions": "edit",
"name": "Smith, John",
"form": "1",
"status": "Approved",
"dateSubmitted": "7/9/2019 7:56 AM"
}, {
"actions": "edit",
"name": "Bob, Joe",
"form": "2",
"status": "Approved",
"dateSubmitted": "7/9/2019 7:56 AM"
}
];
$(document).ready(function () {
$("#tableTestDyno").dynatable({
"dataset": {
records: records
}
});
});
</script>
</body>
</html>
EDIT
Here's a link to the test page. https://itservices.bc3.edu/EmployeePortal/Employee/DynaTest
After reviewing some more dynatable examples, I noticed all the example had an empty tbody is the table. So I added an empty tbody to mine. After that it works fine.