About Fixed Column

pm5249

Hi Alen,

I want to make my dataTable's first 2 columns fixed and I am using the way you showed in the example but the issue is I am using older version of jquery. Like you have mentioned jquery 1.12.4 but I am using 1.10.4. and I am using that version throughout my application. If fixed column structure needs jquery version 1.12.4 then it seems I would not be able to use this functionality.
Is there any solution on this? Please suggest me.

Thanks.
PM

allan

jQuery 1.10.x should work fine. In fact anything later than 1.7 should work okay.

Allan

pm5249

Thanks Allan,

But you have mentioned that it needs DataTable js version 10.12.16 and I am using 10.12.10 for 2nd version it is not working.

PM

allan

it needs DataTable js version 10.12.16

There is no 10.12.16 version of either jQuery of DataTables.

The current release of DataTables (1.10.16) will work with any version of jQuery from v1.7 or newer. This information is available on the compatibility page.

Allan

pm5249

Its ok Allan. There might be typo mistake from me, but it still not working.

this is what my dataTable code is.

myDatatableProduct=$('#productConfigurationList').DataTable( {
"sDom": '<lf<"#gobutton"><"#actions"><t>ip<"clear"<".productConfigurationactions">>>',
orderCellsTop: false,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
scrollY:"300px",
scrollX: false,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2
},
"columnDefs": [
{ "width": "20%", "targets": 0 }
],

    aoColumnDefs: [
        { 'bSortable': false, 'aTargets': ['no-sort'] }//,{'bVisible': false, 'aTargets': targetArray}
    ],
    initComplete: function () {
    $select = $('<select/>').appendTo('#actions');
        $select.attr('id', 'selectactions');
        $select.addClass("myselectstyleforactions combobox");
        $('<option/>').val('').text('Actions').appendTo($select);
        $('<option/>').val('showhidecols').text('Show / Hide Columns').appendTo($select);

        $("#gobutton").html("<button class='form-control btn populate_submit_save_btn' onclick='performAction()'>Go</button>");
        var createCloneProductButton = '<div class="row"><div class="col-lg-12 col-fhd-12 "><button id="createProductbtn" class="form-control btn common_button">CREATE PRODUCT</button><button id="cloneProductbtn" class="form-control btn common_button">CLONE PRODUCT</button></div></div>';
        $(".productConfigurationactions").html(createCloneProductButton);
        var that = this;
        var columns = this.api().columns().data();


                 console.log($.inArray("Yes",that.api().column('16').data()));
            if($.inArray("Yes",that.api().column('16').data()) >= 0)    { 

            that.api().column('16')
                            .search('Yes')
                            .draw();
                            }
                            else{
                            var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val() != "All" ? $(this).val() : ""
                            );
                        that.api().column(16)
                            .search( val ? 'All' : '', true, false )
                            .draw();
                            }
        $('#productConfigurationList thead tr#filterrow th').each( function (index) {
        var select = $('<select class="myselectstyle combobox" onclick="stopPropagation(event)"><option value="">Select</option></select>')
                                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val() != "All" ? $(this).val() : ""
                        );

                        that.api().column(index)
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                columns[index].forEach( function ( d, j ) {

//alert(d);
if (!select.find('option[value="' + d + '"]').length) {
select.append( '<option value="'+d+'">'+d+'</option>' );
}
if(index == 16)
{
if (!select.find('option[value="All"]').length) {
select.append( '<option value="All">All</option>' );
}
}

        });
              if($.inArray(index, targetArray) !== -1 ){
            var column = that.api().column(index);
            var isVisible = column.visible();
            that.api().settings()[0].aoColumns[index].bSearchable = false;
            column.visible(false);
            that.api().rows().invalidate().draw(false);
        }

        var columnLabel = $($('#productConfigurationList thead tr:last-child th').get(index)).html();
        select.attr('id', columnLabel);
            select.appendTo(this);

        });


        $('#productConfigurationList tbody').on('click', 'td:nth-child(1)', function () {
            alert('click');
        });
        $('.dataTable').wrap('<div class="dataTables_scroll" />');
        var scrollWidth = $("#productConfigurationList tbody").width();
        $(".dataTables_scroll").css({"max-width": scrollWidth+"px"});
        $( " input[type='search']" ).css( "font-family","Roboto FontAwesome " );

        $('.combobox').combobox();

    }
    ,
    "fnDrawCAllback": function( oSettings ) {
        $(".dataTables_wrapper .dataTables_paginate .paginate_button").css({"color":"red !important"});
     }
} );

});

Its yet now working.

pm5249

it shows horizontal scroll bar for thead and vertical and horizontal scroll bar for tbody but columns are not fixed.

allan

Happy to take a look at a test case showing the issue.

Allan

pm5249

You want code for it? or you want to see what causes this issue?

pm5249

hey allen,

See this is my HTML Code

<

table id="pricingTable" class=" table table-striped table-hover display" cellspacing="0" width="100%">
<thead>
<tr id="filterrow">
<th></th>
<th></th>
<th data-hide="true" class="smallWidth"></th>
<th class="smallWidth"></th>
<th class="smallWidth"></th>
<th></th>
<th class="smallWidth"></th>
<th class="smallWidth"></th>
<th></th>
<th class="smallWidth"></th>
<th class="smallWidth"></th>
<th></th>
<th class="smallWidth"></th>
<th class="smallWidth"></th>
<th></th>
<th class="smallWidth"></th>
<th class="smallWidth"></th>
<th></th>
</tr>
<tr>
<th>Description</th>
<th>Type</th>
<th data-hide="true" class="smallWidth">Algorithm</th>
<th class="smallWidth">GRP</th>
<th class="smallWidth">US</th>
<th>Canada CAD</th>
<th class="smallWidth">LA</th>
<th class="smallWidth">US</th>
<th>Canada CAD</th>
<th class="smallWidth">LA</th>
<th class="smallWidth">US</th>
<th>CAD</th>
<th class="smallWidth">LA</th>
<th class="smallWidth">US</th>
<th>CAD</th>
<th class="smallWidth">LA</th>
<th class="smallWidth">US</th>
<th>Canada CAD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample1</td>
<td>Sample2</td>
<td data-hide="true">sample3</td>
<td class="pop popException" >4000</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
<td>1680</td>
</tr>
</tbody>
</html>

This is the js code

*** Pricing Table Creation ***/
var priceTable = $("#pricingTable").DataTable({
"sDom": '<lf<"#priceGobutton.actions"><"#priceActions.actions"><t>ip<"clear"<"#savebutton">>>',
orderCellsTop: false,
fixedHeader: true,
fixedColumns: {
leftColumns: 2
},
scrollX: true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
initComplete: function () {
$("div.toolbar11").html('<b>Custom tool bar! Text/images etc.</b>');
$select = $('<select/>').appendTo('#priceActions');
$select.attr('id', 'selectactions');
$select.addClass("myselectstyleforactions combobox");
$('<option/>').val('').text('Actions').appendTo($select);
$('<option/>').val('showhidecols').text('Show/Hide Columns').appendTo($select);
//$("#priceGobutton").html("<button class='form-control btn populate_submit_save_btn' onclick='performAction()'>Go</button>");
var goButton = $("<button>").addClass("form-control btn populate_submit_save_btn").attr("type", "button").html("Go");
$("#priceGobutton").html(goButton);

        $('#priceActions').combobox();
        var that = this;
        var columns = this.api().columns().data();
        var tableHeaderTh = $("#pricing thead #filterrow th");
        setTimeout(multifilterColumns(tableHeaderTh, that, columns), 5000);

        goButton.on("click", function (e) {
            var action = $("#priceActions").parent().find(".combobox-container input[type=hidden]").val();
            //performAction(action, that.api(), e, priceTable);
                 performAction(action, that.api(), e, priceTable, $('#pricingTable'));
        });
        $('.dataTable').wrap('<div class="dataTables_scroll" />');
        var scrollWidth = $("#table-priceregion tbody").width();
        $(".dataTables_scroll").css({ "max-width": scrollWidth + "px" });
        //Hide the columns which should not shown bydefault.
        var hiddenColumns = $("#pricing thead th[data-hide=true],#pricing tbody td[data-hide=true]");
        $(hiddenColumns).addClass("hideClass");
        console.log(columns);
    },
    createdRow: function (row, data, index) {
        $(row).find("td.pop").on("click", function (e) {
            e.stopPropagation();
            var pos = $(this).offset();
            $(".customPopup").removeClass("hideClass");

            var width = $(".customPopup").outerWidth();
            var height = $(".customPopup").outerHeight();
            exceptionValuePopup($(this), pos, width, height);
        })
    }
});

priceTable.on( 'draw', function () {
//Hide the columns which should not shown bydefault.
var hiddenColumns = $("#pricingTable thead th[data-hide=true],#pricingTable tbody td[data-hide=true]");
$(hiddenColumns).addClass("hideClass");
});

These are the js files I have called on html page including jquery

This is what I am getting error.

pm5249

One more thing I am facing one issue because of one function if I removed that function then I am getting error :
jquery.dataTables.min.js:59 Uncaught TypeError: Cannot read property 'style' of undefined

allan

Please see this tech note for information on how to provide a test case.

Allan

pm5249

Hey Allen
Thanks I just checked with jsfiddle over there it is working well but when I use it at my end it is not working.

tangerine

Please provide a link to your test case.

pm5249

hi Allen,

It worked for me but only one issue I am getting error saying Style of undefined why is that?

PM

tangerine

Please provide a link to your test case.

pm5249

I am not able to provide the test case as the code is confidential. just let me know my table structure it disturbed when i use Datatable in bootstrap tabs. tables gets disturbed in the tab which is not active.

pm5249

Can I make column fixed on button click?

pm5249

One more issue Allen,
When I use version 1.10.16 draw callback doesn't work.

allan

When I use version 1.10.16 draw callback doesn't work.

It appears to work without issue here: http://live.datatables.net/mahukuya/1/edit

We'd need a link to a page showing the issue. As noted in the tech note I linked to before you can use services such as JSBin or JSFiddle to create a test case without the confidential information.

I'm afraid I can't offer any help without a test case.

Allan

pm5249

Its Ok Allen,

You have already helped me alot but I am not understanding why draw is not working rather it is not getting called.

pm5249

Allen,

does it need higher version of jquery like 1.11.3 which has been mentioned in link? I am using 1.10.2.

pm5249

Allen,

I cant show you the test case but here I have made one sample project over there its not working at all. You can see the screenshot
.

pm5249

https://jsfiddle.net/PM5249/fttne1eh/

See this sample code link I am sharing.

allan

drawCallBack

That is wrong. As the documentation notes (and Kevin's example from the other thread on the same topic) it should be drawCallback. Note the capitalisation. Javascript is case sensitive.

Allan