CODEWITHSUNDEEP
jqueryhtmlcssdatatable
Catalufo
Catalufo

Reputation: 33

How to fix left column datatable as shown in example

I need to fix the left column as in the example shown below:

https://datatables.net/release-datatables/extensions/FixedColumns/examples/simple.html

What I have is:

 <!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charser="utf8" src="//cdn.datatables.net/fixedcolumns/3.0.3/js/dataTables.fixedColumns.min.js"></script>


    <script>

$(document).ready( function () {
var oTable = $('#example').dataTable( {
    "sScrollY": "500px",
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "bScrollCollapse": true,
    "bPaginate": false
} );
new FixedColumns( oTable, {
      "iLeftColumns": 1,
       "sHeightMatch" : "auto"
    } );
} );
        </script>

And HTML (example for large columns, I will make it 64 right now there are 20):

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Colum1</th>
                        <th>Colum2</th>
                        <th>Colum3</th>
                        <th>Colum4</th>
                        <th>Colum5</th>
                        <th>Colum6</th>
                        <th>Colum7</th>
                        <th>Colum8</th>
                        <th>Colum9</th>
                        <th>Colum10</th>
                        <th>Colum11</th>
                        <th>Colum12</th>
                        <th>Colum13</th>
                        <th>Colum14</th>
                        <th>Colum15</th>
                        <th>Colum16</th>
                        <th>Colum17</th>
                        <th>Colum18</th>
                        <th>Colum19</th>
                        <th>Colum20</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>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>

                    </tr>
                    <?php for($i=0;$i<50;$i++){ ?>
                        <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.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>

                        </tr>
                   <?php }?>
                </tbody>
            </table>

Then I add the CSS that the example wants me to add:

   <style>
              th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 1024px;
        margin: 0 auto;
    }
            </style>

So EVERYTHING is working fine except the part of fixing the first left column, I've been hours trying to get it but I can't make it work.

P.S: This is the error i get from console:

Uncaught ReferenceError: FixedColumns is not definedinformation.php:33 (anonymous function)jquery-latest.min.js:2 m.Callbacks.jjquery-latest.min.js:2 m.Callbacks.k.fireWithjquery-latest.min.js:2 m.extend.readyjquery-latest.min.js:2 J

Upvotes: 2

Views: 4834

Answers (2)

C&#233;sar Le&#243;n
C&#233;sar Le&#243;n

Reputation: 3050

In my case i needed to fix the first 3 columns, so i use:

<script>
    $(document).ready(function () {
        $('#Grid').DataTable({
            "scrollX": true,
            "fixedColumns": {
                leftColumns: 3
            }
        });
    });
</script>

And it works perfectly.

Of course u need the right jquery.datatable.js /.css file. You can download those files here jQuery.DataTable download page

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

try this snippet in jQuery.. 

$(document).ready(function() {
	var table = $('#example').DataTable( {
		scrollY:        "300px",
		scrollX:        true,
		scrollCollapse: true,
		paging:         false
	} );
	new $.fn.dataTable.FixedColumns( table );
} );
 th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 1024px;
        margin: 0 auto;
    }
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charser="utf8" src="http://cdn.datatables.net/fixedcolumns/3.0.3/js/dataTables.fixedColumns.min.js"></script>

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Colum1</th>
                        <th>Colum2</th>
                        <th>Colum3</th>
                        <th>Colum4</th>
                        <th>Colum5</th>
                        <th>Colum6</th>
                        <th>Colum7</th>
                        <th>Colum8</th>
                        <th>Colum9</th>
                        <th>Colum10</th>
                        <th>Colum11</th>
                        <th>Colum12</th>
                        <th>Colum13</th>
                        <th>Colum14</th>
                        <th>Colum15</th>
                        <th>Colum16</th>
                        <th>Colum17</th>
                        <th>Colum18</th>
                        <th>Colum19</th>
                        <th>Colum20</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>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>
                        <td>fdf</td>

                    </tr>
                  
                        <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.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>
                        <td>t.d.net</td>

                        </tr>
                   
                </tbody>
            </table>

Upvotes: 1

Related Questions