locked
jquery datatable - table header width not aligned with body width ,please help RRS feed

  • Question

  • User-1355965324 posted

    I am using the JS Datatable for the attendance report. While taking the report   all the headers and the body is aligned correctly when  the report is coming , but when I shrink the screen , the alignment is going wrong.  I have attached the image herewith and the code given below. Please help how to align the header and the body in the same column when I shrink the screen.

    Before resize of the screen

    https://drive.google.com/open?id=1MG94laKuxttEpE_wTKFejlp11xTt5F6c 

    After resize of the screen

    https://drive.google.com/file/d/1tGw2rmI3RX0GtKygyEKzt0X_ojLJzEWX/view

    My code is given below

    <div class="table-responsive">
                            <div class="col-sm-12 portlet light @ViewBag.IsReport" id="divReport">
                                <table id="tblAttendance" class="table table-bordered table-striped" style="width:100%;font-size:90%">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>
                                                Date
                                            </th>
                                            <th>
                                                Depot Name
                                            </th>
                                            <th>
                                                Employee Name
                                            </th>
    
                                            <th>
                                                Clocked In
                                            </th>
                                            <th>
                                                Clocked Out
                                            </th>
                                            <th>
                                                N. Attendance
                                            </th>
                                            <th>
                                                Day Off
                                            </th>
    
                                            <th>
                                                Sick
                                            </th>
                                            <th>
                                                Holiday
                                            </th>
                                            <th>
                                                Maternity
                                            </th>
                                            <th>
                                                Time Off
                                            </th>
                                            <th>
                                                Time Off Hrs
                                            </th>
                                            <th>
                                                Deducted
                                            </th>
    
                                            <th>
                                                Emp Hrs
                                            </th>
                                            <th>
                                                Extra Hrs
                                            </th>
                                            <th>
                                                Remark
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (AttendanceLogModel log in ViewBag.AttendanceLogs as List<AttendanceLogModel>)
                                        {
                                            <tr>
                                                <td> @log.FromDate</td>
                                                <td> @log.DepotName</td>
                                                <td> @log.EmployeeName</td>
                                                <td> @log.ClockedIn</td>
                                                <td> @log.ClockedOut</td>
                                                <td> @Convert.ToInt32(@log.IsNormalAttendance)</td>
                                                <td> @Convert.ToInt32(@log.IsDayOffMarked)</td>
                                                <td> @Convert.ToInt32(@log.IsSickMarked)</td>
                                                <td> @Convert.ToInt32(@log.IsHolidayMarked)</td>
                                                <td> @Convert.ToInt32(@log.IsMaternityLeave)</td>
                                                <td> @Convert.ToInt32(@log.IsTimeOff)</td>
                                                <td> @log.TimeOffHrs</td>
                                                <td> @log.IsDeducted</td>
                                                <td> @log.Hrs</td>
                                                <td> @Convert.ToInt32(@log.ExtraTimeHrs)</td>
                                                <td> @log.Remark</td>
    
                                            </tr>
    
                                        }
    
                                    </tbody>
    
                                </table>
                            </div>
                        </div>
    
    <script>
        $(document).ready(function () {
            $('#tblAttendance').DataTable({
                order: [
                    [2, 'asc'],
                    [1, 'asc']
                ],
                rowGroup: {
                    dataSrc: [2, 1],
                    startRender: function (rows, group) {
                        return $('<tr/>')
                            .append('<td class="td-left" >' + group + '</td>');
    
                    }
                },
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false
                    },
                    {
                        "targets": [2],
                        "visible": false
                    },
                    {
                        "className": "dt-center", "targets": "_all"
                    },
                    { "width": "10%", "targets": 0 },
                    { "width": "10%", "targets": 14 },
                ],
                "pageLength": 40,
                scrollY: "500px",
                scrollX: true,
                 paging: true,
                 dom: 'Bfrtip',
                buttons: [
                    'copy',
                    'csv',
                    'excel',
                    {
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        pageSize: 'LEGAL' }
                                  
                ]
                 
            });
        });
    </script>
    
    

    Pol

    Tuesday, July 2, 2019 9:42 AM

All replies

  • User665608656 posted

    Hi polachan,

    Since only part of the code you gave me, I am not sure if your reference file is all correct, because as far as the code you are currently giving me is concerned, there is nothing wrong.

    The reason for this issue is probably due to errors in file references.

    I created a table with the same function based on the code you gave me, and when I resize the window, the form of the table works very well.

    I'll give you all the documents I quoted below, you can refer to them. If you still have issues, please provide more detailed code to let me know.

        <link href="http://localhost:58656/bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>

    The result of this work demo based on your code with my code:

    Best Regards,

    YongQing.

    Wednesday, July 3, 2019 2:38 AM
  • User-1355965324 posted

    Yongqing

    Today when I am taking the same report is working fine. I didnot do anything. But I dont know what was the problem on yesterday

    Many Thanks

    Pol

    Wednesday, July 3, 2019 7:48 AM