Datatables losing last row when applied to fairly simple table
Datatables losing last row when applied to fairly simple table
mnbob70
Posts: 23Questions: 2Answers: 0
I luckily stumbled across the following issue in my application today otherwise I would never have suspected the possibility of rows being dropped from a table. See the following HTML which demonstrates how the last row in the table is being dropped when datatables is applied.
<html>
<head><title>DT loses row test</title></head>
<body>
<table cellspacing="0" rules="all" class="table table-bordered table-hover dataTable" border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Document</th><th scope="col">Line</th><th scope="col">Code</th><th scope="col">Description</th><th scope="col">Pages</th><th scope="col">Recorded?</th><th scope="col">Status</th><th scope="col">Last Update</th><th scope="col">IDD Status</th>
</tr>
</thead>
<tbody>
<tr data-uid="5943784" class="highlight-row">
<td>5943784</td><td>1</td><td>316 </td><td>Assignment of Mortgage</td><td>4</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943785">
<td>5943785</td><td>2</td><td>316 </td><td>Assignment of Mortgage</td><td>4</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943786">
<td>5943786</td><td>3</td><td>316 </td><td>Assignment of Mortgage</td><td>4</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943787">
<td>5943787</td><td>4</td><td>316 </td><td>Assignment of Mortgage</td><td>5</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943788">
<td>5943788</td><td>5</td><td>316 </td><td>Assignment of Mortgage</td><td>5</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943789">
<td>5943789</td><td>6</td><td>300 </td><td>Mortgage</td><td>27</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:54 AM</td><td>NA</td>
</tr>
<tr data-uid="5943790">
<td>5943790</td><td>7</td><td>653 </td><td>Consolidation, Extension, and Modification Agreement</td><td>43</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:54 AM</td><td>NA</td>
</tr>
<tr data-uid="5945548">
<td>5945548</td><td>9</td><td>584 </td><td>Affidavit Regarding Mortgage Tax</td><td>1</td><td>No</td><td>Submitted</td><td>08/17/2016 02:48 PM</td><td>NA</td>
</tr>
<tr data-uid="5998135">
<td>5998135</td><td>11</td><td>300 </td><td>Mortgage</td><td>16</td><td>No</td><td>ReturnFatal</td><td>01/07/2017 07:44 AM</td><td>NA</td>
</tr>
<tr data-uid="5998143">
<td>5998143</td><td>12</td><td>653 </td><td>Consolidation, Extension, and Modification Agreement</td><td>25</td><td>No</td><td>ReturnFatal</td><td>01/07/2017 07:44 AM</td><td>NA</td>
</tr><tr data-uid="5998149">
<td>5998149</td><td>13</td><td>584 </td><td>Affidavit Regarding Mortgage Tax</td><td>1</td><td>No</td><td>TeamHold</td><td>09/22/2016 09:54 AM</td><td>NA</td>
</tr>
</tbody>
</table>
<div> </div>
<div> </div>
<div> </div>
<table cellspacing="0" rules="all" class="table table-bordered table-hover dataTable" border="1" id="gvDocuments" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Document</th><th scope="col">Line</th><th scope="col">Code</th><th scope="col">Description</th><th scope="col">Pages</th><th scope="col">Recorded?</th><th scope="col">Status</th><th scope="col">Last Update</th><th scope="col">IDD Status</th>
</tr>
</thead>
<tbody>
<tr data-uid="5943784" class="highlight-row">
<td>5943784</td><td>1</td><td>316 </td><td>Assignment of Mortgage</td><td>4</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943785">
<td>5943785</td><td>2</td><td>316 </td><td>Assignment of Mortgage</td><td>4</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943786">
<td>5943786</td><td>3</td><td>316 </td><td>Assignment of Mortgage</td><td>4</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943787">
<td>5943787</td><td>4</td><td>316 </td><td>Assignment of Mortgage</td><td>5</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943788">
<td>5943788</td><td>5</td><td>316 </td><td>Assignment of Mortgage</td><td>5</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:47 AM</td><td>NA</td>
</tr>
<tr data-uid="5943789">
<td>5943789</td><td>6</td><td>300 </td><td>Mortgage</td><td>27</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:54 AM</td><td>NA</td>
</tr>
<tr data-uid="5943790">
<td>5943790</td><td>7</td><td>653 </td><td>Consolidation, Extension, and Modification Agreement</td><td>43</td><td>Yes</td><td>ReturnClient</td><td>11/10/2016 07:54 AM</td><td>NA</td>
</tr>
<tr data-uid="5945548">
<td>5945548</td><td>9</td><td>584 </td><td>Affidavit Regarding Mortgage Tax</td><td>1</td><td>No</td><td>Submitted</td><td>08/17/2016 02:48 PM</td><td>NA</td>
</tr>
<tr data-uid="5998135">
<td>5998135</td><td>11</td><td>300 </td><td>Mortgage</td><td>16</td><td>No</td><td>ReturnFatal</td><td>01/07/2017 07:44 AM</td><td>NA</td>
</tr>
<tr data-uid="5998143">
<td>5998143</td><td>12</td><td>653 </td><td>Consolidation, Extension, and Modification Agreement</td><td>25</td><td>No</td><td>ReturnFatal</td><td>01/07/2017 07:44 AM</td><td>NA</td>
</tr><tr data-uid="5998149">
<td>5998149</td><td>13</td><td>584 </td><td>Affidavit Regarding Mortgage Tax</td><td>1</td><td>No</td><td>TeamHold</td><td>09/22/2016 09:54 AM</td><td>NA</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
documentTable = jQuery("#gvDocuments").dataTable({
"sDom": "t",
"aoColumns": [
{ "mData": "DocumentID", "bSortable": false },
{ "mData": "Line", "bSortable": false },
{ "mData": "Code", "bSortable": false },
{ "mData": "Description", "bSortable": false },
{ "mData": "Pages", "bSortable": false },
{ "mData": "IsRecorded", "bSortable": false },
{ "mData": "Status", "bSortable": false },
{ "mData": "LastUpdate", "bSortable": false },
{ "mData": "IDD_Status", "bSortable": false },
]
});
</script>
</body>
</html>
This discussion has been closed.
Replies
Your description of the problem didn't make sense until I built the test case for you:
http://live.datatables.net/yujucidu/1/edit
Datatables is not dropping the last row. By default the page length is 10 rows and you have 11. I added
pageLength: "20"to the config to allow the 11 rows to sow on one page.FYI, you are using legacy commands. They will work (backward compatible) but you should consider using the current command notation.
Kevin
From what I see, you do not explicitly turn paging off, but you are not including paging in the dom. Try turning off paging
Thanks. Since I'm only displaying the table with no other settings I would think datatables should default to no page length since there is no way for the user to change what they are seeing.
I went to live.datatables.net and ran the default configuration. It showed 57 rows 10 per page with paging turned on.
I then changed it to
it showed me the first ten row with no paging.