Quantcast
Channel: FixedColumns — DataTables forums
Viewing all 97 articles
Browse latest View live
↧

FixedColumns With Horizontal and Vertical Scrolling Issues

April 18, 2014, 6:43 am
$
0
0
Hi Allan,

We have a very wide DataTable comprising of 29 columns. We want to freeze the first five columns. These five columns have "rowspan=2". We have vertical headers in all the other columns. When I freeze the left five columns the height of column header doubles. We are using server side processing/data- pipelining. Whenever I scroll vertically the height keeps increasing of the headers. It seems with every scroll it doubles it to a point that the whole page is covered with just the row headers.

Second problem is that when scrolling too fast the left pane with the frozen columns disappear completely and then after a while they reappear that is not a big issue though.

Please help. Thank you very much.

Best regards,

Ali
↧
Search

FixedColumns & bJQueryUI true not playing niceley togther

April 27, 2014, 5:40 pm
$
0
0
Hi.

I can get fixed columns and themes working independantly of eachother however when trying to use them together i have problems.

When I try to search to filter the table, it collapses as it should to show matches, but the fixed columns don't. The following example demonstrates this behaviour:

http://datatables.net/release-datatables/extras/FixedColumns/themed.html.

I want it to collapse with the rest of the table, so have done some googling and came across a couple of threads saying to use the FixedColumns nightly JS.

I included both the fixedcolumn nightly and the datatables nightly instead of the originals and for some reason fixedcolumn stops working altogether.

Any ideas what's going on? html below - sorry if its a bit of a mess:

<?php $con = mysql_connect("localhost","root", ""); if(!$con){ die("Error: ".mysql_error()); } mysql_select_db("oxtongateway", $con); $result = mysql_query("SELECT * FROM gateway"); ?> <!DOCTYPE html> <html> <head> <title>DataTables</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href='http://fonts.googleapis.com/css?family=Open+Sans&#039; rel='stylesheet' type='text/css'> <style type="text/css"> @import "datatables/media/css/demo_table_jui.css"; @import "datatables/media/themes/css/smoothness/jquery-ui-1.10.4.custom.css"; @import "datatables/extras/ColVis/media/css/ColVis.css"; @import "datatables/extras/TableTools/media/css/TableTools.css"; @import "datatables/extras/FixedColumns/media/css/FixedColumns.css"; </style> <style> body { font-family: 'Open Sans', 'sans-serif'; font-size: 12px; } th, td { white-space: nowrap; } .container {width:80%; margin:0 auto;} #top {height:100px;} .ColVis {display:inline; float:left;} </style> <script src="datatables/media/js/jquery.js" type="text/javascript"></script> <script src="datatables/media/js/jquery.dataTables.nightly.js" type="text/javascript"></script> <script src="datatables/extras/ColVis/media/js/ColVis.js" type="text/javascript"></script> <script src="datatables/extras/TableTools/media/js/TableTools.js" type="text/javascript"></script> <script src="datatables/extras/TableTools/media/js/ZeroClipboard.js" type="text/javascript"></script> <script src="datatables/extras/FixedColumns/media/js/FixedColumns.nightly.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var oTable=$('#datatables').dataTable({ "sScrollY": 500, "sScrollX": "300px", "bScrollCollapse": true, "bJQueryUI": true, "bPaginate": false, //Show/Hide Cols "sDom": '<"H"TClfr>t<"F"ip>', "aoColumnDefs": [ { "bVisible": false, "aTargets": [ 13,14,15,16,17 ] } ], "oColVis": { "activate": "mouseover", "bRestore": true, "sAlign": "left", "aiExclude": [ 0,1,2,3 ] }, //End Show/Hide Cols }); new FixedColumns( oTable, { "iLeftColumns": 4 }); }); //Fix for table overflowing and therefore stopping horzontal scroll table=$("#datatables").dataTable(); table.wrap('<div style="overflow: auto; width: ' + table.parent().parent().parent().width()*0.95 + 'px"/>'); </script> </head> <body> <div class="container" id="top"> <h1>Master Database</h1> </div> <div class="container"> <table id="datatables" cellpadding="0" cellspacing="0" border="0" class="display"> <thead> <tr> <th>ID</th> <th>Title</th> <th>First Name</th> <th>Surname</th> <th>Home Phone</th> <th>Mobile Phone</th> <th>Email</th> <th>House Number</th> <th>Road Name</th> <th>Town</th> <th>Postcode</th> <th>Gender</th> <th>Date of Birth</th> <th>Sexual Orientation</th> <th>Religion</th> <th>Disability</th> <th>Ethnicity</th> <th>Date Added to System</th> </tr> </thead> <tbody> <?php while($row = mysql_fetch_array($result)) { ?> <tr> <td><?=$row['id']?></td> <td><?=$row['title']?></td> <td><?=$row['first']?></td> <td><?=$row['last']?></td> <td><?=$row['home']?></td> <td><?=$row['mobile']?></td> <td><?=$row['email']?></td> <td><?=$row['house']?></td> <td><?=$row['road']?></td> <td><?=$row['town']?></td> <td><?=$row['postcode']?></td> <td><?=$row['gender']?></td> <td><?=$row['dob']?></td> <td><?=$row['sexual']?></td> <td><?=$row['religion']?></td> <td><?=$row['disability']?></td> <td><?=$row['ethnicity']?></td> <td><?=$row['dateadded']?></td> </tr> <?php } ?> </tbody> </table> </div> </body> </html>
↧
↧

FixedColumns with Row Selection does not work well.

May 10, 2014, 7:06 am
$
0
0

The issue can reproduce by following steps: 1. Select a row; The fixed columns can't be selected; 2. Switch to next page; 3. Go back last page; the whole line will be selected; 4. Then the issue comes out, the fixed columns can be multiple selected and does not clear the selected status when select other non fixed columns;

↧

jQuery DataTable overflow and text-wrapping issues

May 18, 2014, 11:23 am
$
0
0

I have the following DataTable (full-width css class sets width = 100%)

LOB Creditor Line 1 Creditor Line 2 Address City State Zip ...

var profileTable = $(".datatable").dataTable({ "iDisplayLength": 25, "bDestroy": true, "bJQueryUI": true, "sPaginationType": "full_numbers", "bAutoWidth": false });

Everything works fine until there is a record with a long text string...when a record appears with really long text, the data table overflows on the right of the page.

Can someone tell me how to either wrap the text in the cells or prevent this overflow issue?

I've tried via 'table-layout: fixed'...this prevents the overflow but sets all of the columns to the same width.

Thanks

↧

horizontal scrollbar only under non-fixed columns

April 28, 2014, 5:48 am
$
0
0
With the newest version of FixedColumns I can't seem to produce the situation displayed in the intro-example [https://datatables.net/extras/fixedcolumns/] that the horizontal scrollbar starts under the non-fixed columns.
In my table it keeps spanning across the entire table and since the FixedColumn is transparent by default I can see that it is just a duplicate of the first column floating on top of it. I would like that intro-example behaviour though; the first column to be fixed and the rest of the columns with their own scrollbar next to them without the first column as duplicate.
When I use an old version of the plug-in (2.0.4) where the constructor is "new FixedColumn(oTable)" instead of "new $.fn.dataTable.FixedColumns(oTable)" it works for me. However, I had to comment some browser-checking strangeness out in the plug-in and would prefer to use the newest version. How can I make the newest version behave like the old version (=like the intro-example)?
↧
↧

Display scrollbar when using fixedColumns on Android

May 21, 2014, 4:11 am
$
0
0

I have a issue when I set the "sScrollY" value larger than all the the rows of my table (of course the table will not have vertical scroll), the scrollbar is displayed. See the following picture for details:http://1drv.ms/1h7ErnA But when the table has vertical scroll, that scrollbar is dissappeared. It just happen on android.

Have anyone solved it?

Thanks.

↧

Row mismatch at bottom of scroll

July 26, 2014, 3:33 am
$
0
0

If you look at http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/simple.html and scroll to the very bottom, you can see a tiny mismatch appear between the alignment of the fixed column rows compared to the rest of the table. The mismatch appears because at the very end of the scroll, the fixed column stops scrolling before the rest of the table - the effect in the example is very small. However, the problem becomes much more pronounced as the width of the rows increase. With a row height of 60 pixels, the mismatch can be as much as 14 pixels - over 20%. Can anything be done about this? I am seeeing this with DataTables Stable release v1.10.1 and fixed columns Stable release v3.0.2

↧

Fixed Columns and Editor

August 11, 2014, 7:00 am
$
0
0

Hi,

is it possible to use the editor together with fixed columns? I would like to fix the two left columns, still be able to check the box for editing and deleting and use row selection.

Does anyone have a hint on how to achieve this?

Marcus

↧
Search

Uncaught TypeError: undefined is not a function

May 21, 2014, 1:08 pm
$
0
0

I'm trying to initialize the fixedColumns, and get this error back. I have just upgraded to dataTables 1.10 and fixedColumns v.3.01. I've completely stripped everything and left with this: var table = $('result-table').dataTable({ "scrollX": true, }) new $.fn.dataTable.fixedColumns(table);

In the 'old' (new 2 weeks old haha) version it was a bootstrap issue that could be resolved by doing: var frozen = new FixedColumns(table) ({});

Is there a fancy way to make fixedColumns and Bootstrap work together in this version?

↧
↧

serverSide with deferredLoading causes FixedColumns to not initalise properly

December 11, 2014, 1:00 am
$
0
0

This is replicable by using the server side example: https://datatables.net/release-datatables/extensions/FixedColumns/examples/server-side-processing.html

And then adding an initial row:

<tbody>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
</tbody>

And setting the deferredLoading to 1

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        ajax: "../../../examples/server_side/scripts/server_processing.php",
        serverSide: true,
        deferLoading:1
    } );
    new $.fn.dataTable.FixedColumns( table );
} );

Here's the debug output: http://debug.datatables.net/eyasaf

U'll notice the table is created but the first column isn't frozen.

Many thanks in advance for your help

↧

horizontal scroll problem with fixedcolumns

January 21, 2015, 12:18 am
$
0
0

Hi,

when I use the tab key (and shift-tab key) to navigate the table, the horizontal scrolling is not working properly. With v2, the problem was not present. How can I get around this? Thank you for your help!

http://jsfiddle.net/pyrobel/0jk9e10k/5/

↧

can't edit content of fixed column

March 11, 2015, 2:08 am
$
0
0

I have the following code that is updating a Row total. It works fine except when the column it is updating is fixed. Can this be resolved so it will update the field in the fixed column?

var newTotal = (sumInputsIn(thisRow.find('.regVal')));
thisRow.find('.regTotal').val(newTotal);
↧

weird scrolling

March 16, 2015, 8:17 pm
$
0
0

some times I get a situation where the fixed columns will scroll independently of the other columns if you put the cursor over the fixed columns and use the scroll wheel, it's unpredictable and hard to reproduce, though it always seems to happen right after I do a column search and redraw the table

     dataTable
            .column( col )
            .search( search, regex, !regex, false )
            .draw();
↧
↧

fixed columns and hide columns problem

March 13, 2015, 9:25 am
$
0
0

I have a bug when using fixed columns and hiding columns, just using simple toggle to hide: column.visible( ! column.visible() );

when I hide any of the fixed columns the columns header get out of line with their columns and it shifts in some of the non-fixed columns from the right to left underneath the fixed columns headers

is there any good way to prevent this?

↧

How I can fix first column?

June 4, 2015, 9:45 am
$
0
0

Hello,

I created the code with "The generator", because I have little knowledge of js.

I've the following error "DataTables warning: table id=vehicles - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

I've read de documentation about this error and I know that provides from double initialisation the but after several attempts, I'm unable to find the correct solution. I'm only want to fix first column in a datatable editor.

This is the debug: http://debug.datatables.net/aheqiy.

This is my code:

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {

        "ajax": "php/table.vehicles.php",
        "table": "#vehicles",
        "fields": [
            {
                "label": "matricula",
                "name": "matricula"
            },
            {
                "label": "id_personal",
                "name": "id_personal"
            },
            {
                "label": "model",
                "name": "model"
            },
            {
                "label": "renting",
                "name": "renting"
            },
            {
                "label": "inici_renting",
                "name": "inici_renting"
            },
            {
                "label": "final_renting",
                "name": "final_renting"
            },
            {
                "label": "quota",
                "name": "quota"
            },
            {
                "label": "asseguran\u00e7a",
                "name": "asseguranca"
            },
            {
                "label": "inici_ass",
                "name": "inici_ass"
            },
            {
                "label": "final_ass",
                "name": "final_ass",
                "type": "date",
                "dateFormat": "dd\/mm\/y"
            },
            {
                "label": "quota_ass",
                "name": "quota_ass"
            },
            {
                "label": "franquicia",
                "name": "franquicia"
            },
            {
                "label": "pag_fran",
                "name": "pag_fran"
            },
            {
                "label": "proper_itv",
                "name": "proper_itv"
            }
        ]
    } );


    // Activate an inline edit on click of a table cell
    $('#vehicles').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );


        $(document).ready(function() {
            var table = $('#vehicles').DataTable( {
                scrollY:        "300px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false
            } );
            new $.fn.dataTable.FixedColumns( table );
        } );

    
              $('#vehicles').DataTable( {

        "dom": "Tfrtip",
        "ajax": "php/table.vehicles.php",
        "scrollX": "100%",


                        "columns": [
            {
                "data": "matricula"
            },
            {
                "data": "id_personal"
            },
            {
                "data": "model"
            },
            {
                "data": "renting"
            },
            {
                "data": "inici_renting"
            },
            {
                "data": "final_renting"
            },
            {
                "data": "quota"
            },
            {
                "data": "asseguranca"
            },
            {
                "data": "inici_ass"
            },
            {
                "data": "final_ass"
            },
            {
                "data": "quota_ass"
            },
            {
                "data": "franquicia"
            },
            {
                "data": "pag_fran"
            },
            {
                "data": "proper_itv"
            }
        ],

        "tableTools": {
            "sRowSelect": "os",
            "sRowSelector": 'td:first-child',
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }
    } );

} );

}(jQuery));
↧
Search

fixed column header gets a border when clicked (example inside)

June 26, 2015, 7:12 am
↧

How to have full page table width FixedColumns?

August 7, 2015, 11:46 am
$
0
0

I'm playing with the two_columns example. Is there a way to display the datatable in full page width ? I've a large table that must be well visible as much as the full page width, but it always show the table in a very small standard size

Thanks in advance

↧
↧

Fixed columns and scrolling (Internet explorer issue)

September 7, 2015, 5:04 am
$
0
0

Hi,

Has anyone experienced weird behaviour for the fixed columns extension and latest version of IE?

When scrolling (mousewheel) in either the fixed table or the "main" table, the other table is sorta delayed by a fraction of a second, and the tables sometimes misalign.

Chrome works perfectly, and firefox seems to be decent aswell!

↧

Why header superimpose fixed columns

January 19, 2016, 6:43 am
↧

ScrolX create scrolbar under fixed columns on Firefox With Bootstrap

February 5, 2016, 1:59 am
$
0
0

Hello,

ScrolX create scrolbar under fixed columns on Firefox With Bootstrap

Hope this topic may help others :)
Nicolas

↧
Viewing all 97 articles
Browse latest View live
Search