Answered by:
How can I add a blank row at end of the record list

Question
-
User-1355965324 posted
I want to add a blank row at end of the row after listing the record from the table. I would like to insert a blank row after listing the record , Please can you help
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> <style rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></style> <div class="att-area"> <div class="table-responsive"> <table id="empview" class="display nowrap" cellspacing="0" style='font-size:80%'> <thead class="thead-light"> <tr> <th rowspan="2">Employee</th> <th colspan="4">Monday</th> </tr> <tr> <th>Mon<br />In<br />Time</th> @*Monday*@ <th>Mon<br />Out<br />Time</th> @*Monday*@ <th>Mon<br />Break<br />Hrs</th> @*Monday*@ <th>Mon<br />Net<br />Hrs</th> @*Monday*@ </tr> </thead> <tbody> @foreach (EmployeeWorkTimeSettingsModel EmpSetting in ViewBag.EmpviewReport as List<EmployeeWorkTimeSettingsModel>) { <tr> <td style="max-width:500px;overflow:hidden; white-space:nowrap">@EmpSetting.EmployeeName </td> <td>@EmpSetting.MondayInTime </td> <td>@EmpSetting.MondayOutTime </td> <td>@EmpSetting.MondayBreakHrs </td> <td>@EmpSetting.MondayNetHrs </td> </tr> } </tbody> </table> </div> </div> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/plug-ins/1.10.19/api/fnFilterClear.js"></script>
Monday, March 11, 2019 9:37 AM
Answers
-
User839733648 posted
Hi polachan,
.dataTable().fnAddData() is function, you should write it in a new line.
You could write like this;
$(document).ready(function () { $("#empview").DataTable({ "order": [[0, "desc"]], scrollY: "300px", scrollX: true, scrollCollapse: false, paging: false, fixedColumns: { leftColumns: 1 }, dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] }); $('#empview').dataTable().fnAddData(["", "", "", "", ""]); });
Best Regards,
Jenifer
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, March 14, 2019 2:33 AM
All replies
-
User475983607 posted
Confused... what is stopping you from typing HTML in the editor?
<tbody> @foreach (EmployeeWorkTimeSettingsModel EmpSetting in ViewBag.EmpviewReport as List<EmployeeWorkTimeSettingsModel>) { <tr> <td style="max-width:500px;overflow:hidden; white-space:nowrap">@EmpSetting.EmployeeName </td> <td>@EmpSetting.MondayInTime </td> <td>@EmpSetting.MondayOutTime </td> <td>@EmpSetting.MondayBreakHrs </td> <td>@EmpSetting.MondayNetHrs </td> </tr> } <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td>
<td>5</td> </tr> </tbody>Monday, March 11, 2019 3:18 PM -
User839733648 posted
Hi polachan,
According to your description and code, I suggest that you could add a button and click it to add a blank row.
You just need to use .fnAddData() function.
Here is my testing code.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" /> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/plug-ins/1.10.19/api/fnFilterClear.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#empview").DataTable({ "order": [[0, "desc"]] }); $('#addbtn').click(addrow); }); function addrow() { $('#empview').dataTable().fnAddData([ "", "", "", "", ""]); } </script> <input type="button" value="add" id="addbtn" /> <div class="att-area"> <div class="table-responsive"> <table id="empview" class="display nowrap" style='font-size: 80%'>
...... </table> </div> </div>result:
Best Regards,
Jenifer
Tuesday, March 12, 2019 9:25 AM -
User-1355965324 posted
I cannot add button . I am adding a blank just to avoid the problem of fixed column and it make the visibility of the first column in the bottom row of the screen due to the horizontal bar. So If I add blank row at the end it can be sorted.
That is why I am trying to add at end of the row after listing all the record without using button. Please can you suggest the code to add a row without using button
Thanks
Pol
Tuesday, March 12, 2019 4:57 PM -
User839733648 posted
Hi polachan,
You could just add the addrow function in the script.
<script type="text/javascript"> $(document).ready(function () { $("#empview").DataTable({ "order": [[0, "desc"]] }); $('#empview').dataTable().fnAddData(["", "", "", "", ""]); }); </script>
result:
Best Regards,
Jenifer
Wednesday, March 13, 2019 6:16 AM -
User-1355965324 posted
I applied your code like these given below, still not working
<script type="text/javascript"> $(document).ready(function () { var table = $('#empview').DataTable({ "order": [[0, "asc"]], scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1 }, dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], fnAddData(["", "", "", "", ""]); }); }); </script>
Wednesday, March 13, 2019 2:10 PM -
User839733648 posted
Hi polachan,
.dataTable().fnAddData() is function, you should write it in a new line.
You could write like this;
$(document).ready(function () { $("#empview").DataTable({ "order": [[0, "desc"]], scrollY: "300px", scrollX: true, scrollCollapse: false, paging: false, fixedColumns: { leftColumns: 1 }, dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] }); $('#empview').dataTable().fnAddData(["", "", "", "", ""]); });
Best Regards,
Jenifer
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, March 14, 2019 2:33 AM -
User-1355965324 posted
Many Thanks
Thursday, March 14, 2019 2:16 PM