locked
when I freeze the first column of the Jquery data table , Cannot see the column value of the first column of the last row of the table RRS feed

  • Question

  • User-1355965324 posted

    I am using the  javascript  data table to list the employee view . I want to freeze the first column ie  employee name while scrolling horizontally.   But after applying  fixedColumns Left Column 1, the    the employee name of the last row is not visible. I have attached the image link below . I am using the following query data table but when I freeze the  first left , the name of the employee name of the last row cannot be visible.   It happens when the number of record is  more than the limited size of the data table. If any one has experience with the jquery datatable, please can you advise me how to fix the problem. If you click this link you can see the problem . If the number of records is less,  the problem would not be coming.

    https://drive.google.com/drive/my-drive

    <link rel="stylesheet"  href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />

    View
    <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>
                                            <th colspan="4">Tuesday</th>
                                            <th colspan="4">Wednesday</th>
                                            <th colspan="4">Thursday</th>
                                            <th colspan="4">Friday</th>
                                            <th colspan="4">Saturday</th>
                                            <th colspan="4">Sunday</th>
                                            <th rowspan="2"> AVG<br />Dayoff<br />Hrs</th>
                                            <th rowspan="2">Net<br />Hrs<br />Per&nbsp;<br />Week</th>
                                            <th rowspan="2"> Holiday<br />Hrs<br />Per<br />Year</th>
                                            <th rowspan="2"> Sys<br />Holiday<br /> Per<br /> Year </th>
    
                                            <th rowspan="2"> Sys.<br />Hrly<br />Salary </th>
                                            <th rowspan="2"> Month<br />Salary </th>
                                            <th rowspan="2"> Yearly<br />Salary </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*@
    
                                            <th>Tue<br />In<br /> Time</th>   @*Monday*@
                                            <th>Tue<br />Out<br /> Time</th>  @*Monday*@
                                            <th>Tue<br />Break<br /> Hrs</th>  @*Monday*@
                                            <th>Tue<br />Net<br /> Hrs</th>  @*Monday*@
    
                                            <th>Wed<br />In<br /> Time</th>   @*Monday*@
                                            <th>Wed<br />Out<br /> Time</th>  @*Monday*@
                                            <th>Wed<br />Break<br /> Hrs</th>  @*Monday*@
                                            <th>Wed<br />Net<br /> Hrs</th>  @*Monday*@
    
                                            <th>Thu<br />In<br /> Time</th>   @*Monday*@
                                            <th>Thu<br />Out<br /> Time</th>  @*Monday*@
                                            <th>Thu<br />Break<br /> Hrs</th>  @*Monday*@
                                            <th>Thu<br />Net<br /> Hrs</th>  @*Monday*@
    
                                            <th>Fri<br />In<br /> Time</th>   @*Monday*@
                                            <th>Fri<br />Out<br /> Time</th>  @*Monday*@
                                            <th>Fri<br />Break<br /> Hrs</th>  @*Monday*@
                                            <th>Fri<br />Net<br /> Hrs</th>  @*Monday*@
    
                                            <th>Sat<br />In<br /> Time</th>   @*Monday*@
                                            <th>Sat<br />Out<br /> Time</th>  @*Monday*@
                                            <th>Sat<br />Break<br /> Hrs</th>  @*Monday*@
                                            <th>Sat<br /> Hrs</th>  @*Monday*@
    
                                            <th>Sun<br />In<br /> Time</th>   @*Monday*@
                                            <th>Sun<br />Out<br /> Time</th>  @*Monday*@
                                            <th>Sun<br />Break<br /> Hrs</th>  @*Monday*@
                                            <th>Sun<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>
    
                                        <td>@EmpSetting.TuesdayInTime </td>
                                        <td>@EmpSetting.TuesdayOutTime </td>
                                        <td>@EmpSetting.TuesdayBreakHrs </td>
                                        <td>@EmpSetting.TuesdayNetHrs </td>
    
                                        <td>@EmpSetting.WednesdayInTime </td>
                                        <td>@EmpSetting.WednesdayOutTime </td>
                                        <td>@EmpSetting.WednesdayBreakHrs </td>
                                        <td>@EmpSetting.WednesdayNetHrs </td>
    
                                        <td>@EmpSetting.ThursdayInTime </td>
                                        <td>@EmpSetting.ThursdayOutTime </td>
                                        <td>@EmpSetting.ThursdayBreakHrs </td>
                                        <td>@EmpSetting.ThursdayNetHrs </td>
    
                                        <td>@EmpSetting.FridayInTime </td>
                                        <td>@EmpSetting.FridayOutTime </td>
                                        <td>@EmpSetting.FridayBreakHrs </td>
                                        <td>@EmpSetting.FridayNetHrs </td>
    
    
    
                                        <td>@EmpSetting.SaturdayInTime </td>
                                        <td>@EmpSetting.SaturdayOutTime </td>
                                        <td>@EmpSetting.SaturdayBreakHrs </td>
                                        <td>@EmpSetting.SaturdayNetHrs </td>
    
                                        <td>@EmpSetting.SundayInTime </td>
                                        <td>@EmpSetting.SundayOutTime </td>
                                        <td>@EmpSetting.SundayBreakHrs </td>
                                        <td>@EmpSetting.SundayNetHrs </td>
    
                                        <td>@EmpSetting.AvgDayOffHrs</td>
                                        <td>@EmpSetting.NetHrsPerWeek</td>
    
                                        <td>@EmpSetting.HolidayEntitle</td>
                                        <td>@EmpSetting.SystemHoliday</td>
    
                                        <td>@EmpSetting.HourlySalary</td>
                                        <td>@EmpSetting.MonthlySalary</td>
                                        <td>@EmpSetting.YearlySalary</td>
    
                                    </tr>
    
    }
    
    
    
                                    </tbody>
    
    
                                </table>
    
                            </div>
                        </div>



    <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>
    
    $(document).ready(function () {
            var table = $('#empview').DataTable({
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: false,
                paging: false,
                fixedColumns: {
                    leftColumns: 1
    
                },
                pageLength: 60,
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]


    https://drive.google.com/drive/my-drive

    Wednesday, March 6, 2019 11:04 PM

All replies

  • User36583972 posted

    Hi polachan,

     It happens when the number of record is  more than the limited size of the data table. If any one has experience with the jquery datatable, please can you advise me how to fix the problem. If you click this link you can see the problem . If the number of records is less,  the problem would not be coming.

    Unfortunately, we can not see the image you have uploaded. You can upload it to OneDrive.

    The following Javascript library files are loaded for use in FixedColumns example:

    https://code.jquery.com/jquery-3.3.1.js
    https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
    https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js
    

    I test on my side. It is working well.

    For more detailed:

    Left and right fixed columns:
    https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

    FixedColumns examples:
    https://datatables.net/extensions/fixedcolumns/examples/

    Best Regards

    Yong Lu

    Thursday, March 7, 2019 3:23 AM
  • User-1355965324 posted

    Sorry this is my shared Link. https://drive.google.com/open?id=1n46C1Icp0jx7VYfTFCFOQoGtcQVelKcB

    I am using the following css and JS

     

    <style rel="stylesheet"
    href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></style>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
    <link rel="stylesheet"
    href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" /> <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" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.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 src="~/js/bootstrap-editable.js"></script> <script src="~/js/dataTables.fixedColumns.min.js"></script>

    Please can you add the css file and js file to show the fixed column properly

    Pol

    Thursday, March 7, 2019 6:44 AM
  • User36583972 posted


    Hi polachan,

    Please can you add the css file and js file to show the fixed column properly

    Unfortunately, I cannot reproduce your issue on my side.

    Could you upload a runnable demo to us(Including your test material and remove all private information). We can download it and debugging. This will help us quickly analyze your problem.

    Thank you for your understanding.

    Best Regards

    Yong Lu

    Friday, March 8, 2019 8:56 AM
  • User-1355965324 posted

    Just go to the javascript datatable tutorial site  and  then give a long name to the first name for the first  column of the last row.  Then  the horizontal bat will come there and will make the last value invisible

    My chtml code

    <table id="example" class="stripe row-border order-column" style="width:100%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger</td>
                    <td>Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>5421</td>
                    <td>t.nixon@datatables.net</td>
                </tr>
                <tr>
                    <td>Garrett</td>
                    <td>Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                    <td>8422</td>
                    <td>g.winters@datatables.net</td>
                </tr>
                <tr>
                    <td>Ashton</td>
                    <td>Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                    <td>1562</td>
                    <td>a.cox@datatables.net</td>
                </tr>
                <tr>
                    <td>Cedric</td>
                    <td>Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                    <td>6224</td>
                    <td>c.kelly@datatables.net</td>
                </tr>
                <tr>
                    <td>Airi</td>
                    <td>Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                    <td>5407</td>
                    <td>a.satou@datatables.net</td>
                </tr>
                <tr>
                    <td>Brielle</td>
                    <td>Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                    <td>4804</td>
                    <td>b.williamson@datatables.net</td>
                </tr>
                <tr>
                    <td>Herrod</td>
                    <td>Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                    <td>9608</td>
                    <td>h.chandler@datatables.net</td>
                </tr>
                <tr>
                    <td>Rhona</td>
                    <td>Davidson</td>
                    <td>Integration Specialist</td>
                    <td>Tokyo</td>
                    <td>55</td>
                    <td>2010/10/14</td>
                    <td>$327,900</td>
                    <td>6200</td>
                    <td>r.davidson@datatables.net</td>
                </tr>
                <tr>
                    <td>Colleen</td>
                    <td>Hurst</td>
                    <td>Javascript Developer</td>
                    <td>San Francisco</td>
                    <td>39</td>
                    <td>2009/09/15</td>
                    <td>$205,500</td>
                    <td>2360</td>
                    <td>c.hurst@datatables.net</td>
                </tr>
                <tr>
                    <td>Sonya</td>
                    <td>Frost</td>
                    <td>Software Engineer</td>
                    <td>Edinburgh</td>
                    <td>23</td>
                    <td>2008/12/13</td>
                    <td>$103,600</td>
                    <td>1667</td>
                    <td>s.frost@datatables.net</td>
                </tr>
                <tr>
                    <td>Jena</td>
                    <td>Gaines</td>
                    <td>Office Manager</td>
                    <td>London</td>
                    <td>30</td>
                    <td>2008/12/19</td>
                    <td>$90,560</td>
                    <td>3814</td>
                    <td>j.gaines@datatables.net</td>
                </tr>
                <tr>
                    <td>Quinn</td>
                    <td>Flynn</td>
                    <td>Support Lead</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2013/03/03</td>
                    <td>$342,000</td>
                    <td>9497</td>
                    <td>q.flynn@datatables.net</td>
                </tr>
                <tr>
                    <td>Charde</td>
                    <td>Marshall</td>
                    <td>Regional Director</td>
                    <td>San Francisco</td>
                    <td>36</td>
                    <td>2008/10/16</td>
                    <td>$470,600</td>
                    <td>6741</td>
                    <td>c.marshall@datatables.net</td>
                </tr>
                <tr>
                    <td>Haley</td>
                    <td>Kennedy</td>
                    <td>Senior Marketing Designer</td>
                    <td>London</td>
                    <td>43</td>
                    <td>2012/12/18</td>
                    <td>$313,500</td>
                    <td>3597</td>
                    <td>h.kennedy@datatables.net</td>
                </tr>
                <tr>
                    <td>Tatyana</td>
                    <td>Fitzpatrick</td>
                    <td>Regional Director</td>
                    <td>London</td>
                    <td>19</td>
                    <td>2010/03/17</td>
                    <td>$385,750</td>
                    <td>1965</td>
                    <td>t.fitzpatrick@datatables.net</td>
                </tr>
                <tr>
                    <td>Michael</td>
                    <td>Silva</td>
                    <td>Marketing Designer</td>
                    <td>London</td>
                    <td>66</td>
                    <td>2012/11/27</td>
                    <td>$198,500</td>
                    <td>1581</td>
                    <td>m.silva@datatables.net</td>
                </tr>
                <tr>
                    <td>Paul</td>
                    <td>Byrd</td>
                    <td>Chief Financial Officer (CFO)</td>
                    <td>New York</td>
                    <td>64</td>
                    <td>2010/06/09</td>
                    <td>$725,000</td>
                    <td>3059</td>
                    <td>p.byrd@datatables.net</td>
                </tr>
                <tr>
                    <td>Gloria</td>
                    <td>Little</td>
                    <td>Systems Administrator</td>
                    <td>New York</td>
                    <td>59</td>
                    <td>2009/04/10</td>
                    <td>$237,500</td>
                    <td>1721</td>
                    <td>g.little@datatables.net</td>
                </tr>
                <tr>
                    <td>Bradley</td>
                    <td>Greer</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>41</td>
                    <td>2012/10/13</td>
                    <td>$132,000</td>
                    <td>2558</td>
                    <td>b.greer@datatables.net</td>
                </tr>
                <tr>
                    <td>Dai</td>
                    <td>Rios</td>
                    <td>Personnel Lead</td>
                    <td>Edinburgh</td>
                    <td>35</td>
                    <td>2012/09/26</td>
                    <td>$217,500</td>
                    <td>2290</td>
                    <td>d.rios@datatables.net</td>
                </tr>
                <tr>
                    <td>Jenette</td>
                    <td>Caldwell</td>
                    <td>Development Lead</td>
                    <td>New York</td>
                    <td>30</td>
                    <td>2011/09/03</td>
                    <td>$345,000</td>
                    <td>1937</td>
                    <td>j.caldwell@datatables.net</td>
                </tr>
                <tr>
                    <td>Yuri dwqdwqedwqewqe qewe</td>
                    <td>Berry</td>
                    <td>Chief Marketing Officer (CMO)</td>
                    <td>New York</td>
                    <td>40</td>
                    <td>2009/06/25</td>
                    <td>$675,000</td>
                    <td>6154</td>
                    <td>y.berry@datatables.net</td>
                </tr>
                <tr>
                    <td>Caesar</td>
                    <td>Vance</td>
                    <td>Pre-Sales Support</td>
                    <td>New York</td>
                    <td>21</td>
                    <td>2011/12/12</td>
                    <td>$106,450</td>
                    <td>8330</td>
                    <td>c.vance@datatables.net</td>
                </tr>
                <tr>
                    <td>Doris</td>
                    <td>Wilder</td>
                    <td>Sales Assistant</td>
                    <td>Sidney</td>
                    <td>23</td>
                    <td>2010/09/20</td>
                    <td>$85,600</td>
                    <td>3023</td>
                    <td>d.wilder@datatables.net</td>
                </tr>
                <tr>
                    <td>Angelica</td>
                    <td>Ramos</td>
                    <td>Chief Executive Officer (CEO)</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2009/10/09</td>
                    <td>$1,200,000</td>
                    <td>5797</td>
                    <td>a.ramos@datatables.net</td>
                </tr>
                <tr>
                    <td>Gavin</td>
                    <td>Joyce</td>
                    <td>Developer</td>
                    <td>Edinburgh</td>
                    <td>42</td>
                    <td>2010/12/22</td>
                    <td>$92,575</td>
                    <td>8822</td>
                    <td>g.joyce@datatables.net</td>
                </tr>
                <tr>
                    <td>Jennifer</td>
                    <td>Chang</td>
                    <td>Regional Director</td>
                    <td>Singapore</td>
                    <td>28</td>
                    <td>2010/11/14</td>
                    <td>$357,650</td>
                    <td>9239</td>
                    <td>j.chang@datatables.net</td>
                </tr>
                <tr>
                    <td>Brenden</td>
                    <td>Wagner</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>28</td>
                    <td>2011/06/07</td>
                    <td>$206,850</td>
                    <td>1314</td>
                    <td>b.wagner@datatables.net</td>
                </tr>
                <tr>
                    <td>Fiona</td>
                    <td>Green</td>
                    <td>Chief Operating Officer (COO)</td>
                    <td>San Francisco</td>
                    <td>48</td>
                    <td>2010/03/11</td>
                    <td>$850,000</td>
                    <td>2947</td>
                    <td>f.green@datatables.net</td>
                </tr>
                <tr>
                    <td>Shou</td>
                    <td>Itou</td>
                    <td>Regional Marketing</td>
                    <td>Tokyo</td>
                    <td>20</td>
                    <td>2011/08/14</td>
                    <td>$163,000</td>
                    <td>8899</td>
                    <td>s.itou@datatables.net</td>
                </tr>
                <tr>
                    <td>Michelle</td>
                    <td>House</td>
                    <td>Integration Specialist</td>
                    <td>Sidney</td>
                    <td>37</td>
                    <td>2011/06/02</td>
                    <td>$95,400</td>
                    <td>2769</td>
                    <td>m.house@datatables.net</td>
                </tr>
                <tr>
                    <td>Suki</td>
                    <td>Burks</td>
                    <td>Developer</td>
                    <td>London</td>
                    <td>53</td>
                    <td>2009/10/22</td>
                    <td>$114,500</td>
                    <td>6832</td>
                    <td>s.burks@datatables.net</td>
                </tr>
                <tr>
                    <td>Prescott</td>
                    <td>Bartlett</td>
                    <td>Technical Author</td>
                    <td>London</td>
                    <td>27</td>
                    <td>2011/05/07</td>
                    <td>$145,000</td>
                    <td>3606</td>
                    <td>p.bartlett@datatables.net</td>
                </tr>
                <tr>
                    <td>Gavin</td>
                    <td>Cortez</td>
                    <td>Team Leader</td>
                    <td>San Francisco</td>
                    <td>22</td>
                    <td>2008/10/26</td>
                    <td>$235,500</td>
                    <td>2860</td>
                    <td>g.cortez@datatables.net</td>
                </tr>
                <tr>
                    <td>Martena</td>
                    <td>Mccray</td>
                    <td>Post-Sales support</td>
                    <td>Edinburgh</td>
                    <td>46</td>
                    <td>2011/03/09</td>
                    <td>$324,050</td>
                    <td>8240</td>
                    <td>m.mccray@datatables.net</td>
                </tr>
                <tr>
                    <td>Unity</td>
                    <td>Butler</td>
                    <td>Marketing Designer</td>
                    <td>San Francisco</td>
                    <td>47</td>
                    <td>2009/12/09</td>
                    <td>$85,675</td>
                    <td>5384</td>
                    <td>u.butler@datatables.net</td>
                </tr>
                <tr>
                    <td>Howard</td>
                    <td>Hatfield</td>
                    <td>Office Manager</td>
                    <td>San Francisco</td>
                    <td>51</td>
                    <td>2008/12/16</td>
                    <td>$164,500</td>
                    <td>7031</td>
                    <td>h.hatfield@datatables.net</td>
                </tr>
                <tr>
                    <td>Hope</td>
                    <td>Fuentes</td>
                    <td>Secretary</td>
                    <td>San Francisco</td>
                    <td>41</td>
                    <td>2010/02/12</td>
                    <td>$109,850</td>
                    <td>6318</td>
                    <td>h.fuentes@datatables.net</td>
                </tr>
                <tr>
                    <td>Vivian</td>
                    <td>Harrell</td>
                    <td>Financial Controller</td>
                    <td>San Francisco</td>
                    <td>62</td>
                    <td>2009/02/14</td>
                    <td>$452,500</td>
                    <td>9422</td>
                    <td>v.harrell@datatables.net</td>
                </tr>
                <tr>
                    <td>Timothy</td>
                    <td>Mooney</td>
                    <td>Office Manager</td>
                    <td>London</td>
                    <td>37</td>
                    <td>2008/12/11</td>
                    <td>$136,200</td>
                    <td>7580</td>
                    <td>t.mooney@datatables.net</td>
                </tr>
                <tr>
                    <td>Jackson</td>
                    <td>Bradshaw</td>
                    <td>Director</td>
                    <td>New York</td>
                    <td>65</td>
                    <td>2008/09/26</td>
                    <td>$645,750</td>
                    <td>1042</td>
                    <td>j.bradshaw@datatables.net</td>
                </tr>
                <tr>
                    <td>Olivia</td>
                    <td>Liang</td>
                    <td>Support Engineer</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2011/02/03</td>
                    <td>$234,500</td>
                    <td>2120</td>
                    <td>o.liang@datatables.net</td>
                </tr>
                <tr>
                    <td>Bruno</td>
                    <td>Nash</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>38</td>
                    <td>2011/05/03</td>
                    <td>$163,500</td>
                    <td>6222</td>
                    <td>b.nash@datatables.net</td>
                </tr>
                <tr>
                    <td>Sakura ajdhashjdhskahdjk</td>
                    <td>Yamamoto</td>
                    <td>Support Engineer</td>
                    <td>Tokyo</td>
                    <td>37</td>
                    <td>2009/08/19</td>
                    <td>$139,575</td>
                    <td>9383</td>
                    <td>s.yamamoto@datatables.net</td>
                </tr>
                <tr>
                    <td>Thor</td>
                    <td>Walton</td>
                    <td>Developer</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2013/08/11</td>
                    <td>$98,540</td>
                    <td>8327</td>
                    <td>t.walton@datatables.net</td>
                </tr>
                <tr>
                    <td>Finn</td>
                    <td>Camacho</td>
                    <td>Support Engineer</td>
                    <td>San Francisco</td>
                    <td>47</td>
                    <td>2009/07/07</td>
                    <td>$87,500</td>
                    <td>2927</td>
                    <td>f.camacho@datatables.net</td>
                </tr>
                <tr>
                    <td>Serge</td>
                    <td>Baldwin</td>
                    <td>Data Coordinator</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2012/04/09</td>
                    <td>$138,575</td>
                    <td>8352</td>
                    <td>s.baldwin@datatables.net</td>
                </tr>
                <tr>
                    <td>Zenaida</td>
                    <td>Frank</td>
                    <td>Software Engineer</td>
                    <td>New York</td>
                    <td>63</td>
                    <td>2010/01/04</td>
                    <td>$125,250</td>
                    <td>7439</td>
                    <td>z.frank@datatables.net</td>
                </tr>
                <tr>
                    <td>Zorita</td>
                    <td>Serrano</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>56</td>
                    <td>2012/06/01</td>
                    <td>$115,000</td>
                    <td>4389</td>
                    <td>z.serrano@datatables.net</td>
                </tr>
                <tr>
                    <td>Jennifer</td>
                    <td>Acosta</td>
                    <td>Junior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>43</td>
                    <td>2013/02/01</td>
                    <td>$75,650</td>
                    <td>3431</td>
                    <td>j.acosta@datatables.net</td>
                </tr>
                <tr>
                    <td>Cara</td>
                    <td>Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>$145,600</td>
                    <td>3990</td>
                    <td>c.stevens@datatables.net</td>
                </tr>
                <tr>
                    <td>Hermione</td>
                    <td>Butler</td>
                    <td>Regional Director</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2011/03/21</td>
                    <td>$356,250</td>
                    <td>1016</td>
                    <td>h.butler@datatables.net</td>
                </tr>
                <tr>
                    <td>Lael</td>
                    <td>Greer</td>
                    <td>Systems Administrator</td>
                    <td>London</td>
                    <td>21</td>
                    <td>2009/02/27</td>
                    <td>$103,500</td>
                    <td>6733</td>
                    <td>l.greer@datatables.net</td>
                </tr>
                <tr>
                    <td>Jonas ajsdhsahjdhskadh </td>
                    <td>Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>$86,500</td>
                    <td>8196</td>
                    <td>j.alexander@datatables.net</td>
                </tr>
                <tr>
                    <td>Shad</td>
                    <td>Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>$183,000</td>
                    <td>6373</td>
                    <td>s.decker@datatables.net</td>
                </tr>
                <tr>
                    <td>Michael sjkdasjkadahkjdh adj</td>
                    <td>Bruce</td>
                    <td>Javascript Developer</td>
                    <td>Singapore</td>
                    <td>29</td>
                    <td>2011/06/27</td>
                    <td>$183,000</td>
                    <td>5384</td>
                    <td>m.bruce@datatables.net</td>
                </tr>
                <tr>
                    <td>Donna</td>
                    <td>Snider</td>
                    <td>Customer Support</td>
                    <td>New York</td>
                    <td>27</td>
                    <td>2011/01/25</td>
                    <td>$112,000</td>
                    <td>4226</td>
                    <td>d.snider@datatables.net</td>
                </tr>
            </tbody>
        </table>

    Css file

    • https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
    • https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css
      /* Ensure that the demo table scrolls */
          th, td { white-space: nowrap; }
          div.dataTables_wrapper {
              width: 800px;
              margin: 0 auto;
          }
      Javascript
    • $(document).ready(function() {
          var table = $('#example').DataTable( {
              scrollY:        "300px",
              scrollX:        true,
              scrollCollapse: true,
              paging:         false,
              fixedColumns:   {
                  leftColumns: 1,
                  rightColumns: 1
              }
          } );
      } );
      
      In addition to the above code, the following Javascript library files are loaded for use in this example:
      
      https://code.jquery.com/jquery-3.3.1.js
      https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
      https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js

    Friday, March 8, 2019 1:56 PM
  • User36583972 posted

    Hi polachan,

    Just go to the javascript datatable tutorial site  and  then give a long name to the first name for the first  column of the last row.  Then  the horizontal bat will come there and will make the last value invisible

    This is very strange, I suggest you can go to the JQuery DataTables support center for getting suitable help.

    Thank you for your understanding.

    Best Regards

    Yong Lu

    Monday, March 11, 2019 4:19 AM