To increase the height of the data table in fixed height

Question

User-1355965324 posted

Currently I am using the data table to view the employee stattus. I want to increase the height of the datatable to accommodate maximum 35 rows employee details. I want to make it fixed height data table in bootstrap . At the moment it only support 16 rows. I want to increase little bit more in bootstrap .Please can you help
I have attached my code below. Any help would be very appreciated

@section Styles {
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />
}


<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>
                                        <th colspan="4">Tuesday</th>
 
                                        <th rowspan="2"> Sys<br />Holiday<br /> Per<br   </th>
</tr>
<tr>
                                        <th>Mon<br />In<br />Time</th>    
                                        <th>Mon<br />Out<br />Time</th>   
                                        <th>Mon<br />Break<br />Hrs</th>   
                                        <th>Mon<br />Net<br />Hrs</th>   

                                        <th>Tue<br />In<br /> Time</th>    
                                        <th>Tue<br />Out<br /> Time</th>   
                                        <th>Tue<br />Break<br /> Hrs</th>   
                                        <th>Tue<br />Net<br /> Hrs</th>   

                                         

                                    </tr>
                                </thead>

  <tbody>


                                    @foreach (EmployeeWorkTimeSettingsModel EmpSetting in @ViewBag.EmpviewReport)
                                    {
                                        <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>

                                            <td>@EmpSetting.TuesdayInTime </td>
                                            <td>@EmpSetting.TuesdayOutTime </td>
                                            <td>@EmpSetting.TuesdayBreakHrs </td>
                                            <td>@EmpSetting.TuesdayNetHrs </td>
   <td>@EmpSetting.SystemHoliday</td>
</tr>

                                    }



                                </tbody>


                            </table>

@section Scripts
    {
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#empview").DataTable({
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: false,
                paging: false,
                fixedColumns: {
                    leftColumns: 1
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            });
        });
    </script>

Answer 1

User-2054057000 posted

You can increase the height of datatable by using CSS only like this:

<table id="empview" style="height: 500px">
......

Moreover the number of rows per page can be increased by adding this jQuery code:

$('#table2').DataTable({
    "pageLength": 30
});

Reference: Learn jQuery DataTables in 2 minutes

Regards....

Answer 2

User-1355965324 posted

When I add the the   the code given below , the height of the  each row is also expanding. So after that table view is not coming in a good layout.  PageLength property is not visible  there in javascript. Have you any idea  how increase the table without affecting the row size

style="height: 500px"

Answer 3

User-2054057000 posted

So basically your tr element is also affecting. You can set the height of tr in the table itself like this:

<table id="empview"   class="display nowrap" cellspacing="0" style='font-size:80%'>
                                <thead class="thead-light">
                                    <tr style="height: 50px">
                                        <th rowspan="2">Employee</th>
                                        <th colspan="4">Monday</th>
                                        <th colspan="4">Tuesday</th>
 
                                        <th rowspan="2"> Sys<br />Holiday<br /> Per<br   </th>
</tr>
<tr>
                                        <th>Mon<br />In<br />Time</th>    
                                        <th>Mon<br />Out<br />Time</th>   
                                        <th>Mon<br />Break<br />Hrs</th>   
                                        <th>Mon<br />Net<br />Hrs</th>   

                                        <th>Tue<br />In<br /> Time</th>    
                                        <th>Tue<br />Out<br /> Time</th>   
                                        <th>Tue<br />Break<br /> Hrs</th>   
                                        <th>Tue<br />Net<br /> Hrs</th>   

                                         

                                    </tr>
                                </thead>

  <tbody>


                                    @foreach (EmployeeWorkTimeSettingsModel EmpSetting in @ViewBag.EmpviewReport)
                                    {
                                        <tr style="height: 50px">
                                            <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>

                                            <td>@EmpSetting.TuesdayInTime </td>
                                            <td>@EmpSetting.TuesdayOutTime </td>
                                            <td>@EmpSetting.TuesdayBreakHrs </td>
                                            <td>@EmpSetting.TuesdayNetHrs </td>
   <td>@EmpSetting.SystemHoliday</td>
</tr>

                                    }



                                </tbody>


                            </table>

Check the yellow background highlighted code.

Hope it helps you.

Regards