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>

Answer 1

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>

Answer 2

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

Answer 3

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 

Answer 4

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

Answer 5

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>

Answer 6

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

Answer 7

User-1355965324 posted

Many Thanks