locked
How can I add a blank row at end of the record list RRS feed

  • 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