fixed column not working

fixed column not working

sivarajinisivarajini Posts: 1Questions: 1Answers: 0
edited May 2014 in DataTables 1.9

Datatable Fixed column is not working

Scrollbody width and table widths are coming as equal. So I am not getting the horizontal scroll bar for the fxed columns.

we are using " jquery.dataTables.min-1.9.4.js" and Fixedcolumns (3.0.1).js.

html and javascript:

....................................................................................................................................................
<html>
<head>


<link href="datatables/css/dataTables.fixedColumns.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/jquery.dataTables-1.9.4.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/dataTables.fixedHeader.min.css" rel="stylesheet" type="text/css" />
</head>

<body>

Name HR Information Contact
Position Salary Office Extn. E-mail
Name Position Salary Office Extn. E-mail
Tiger Nixon System Architect $320,800 Edinburgh 5421 t.nixon@datatables.net
Garrett Winters Accountant $170,750 Tokyo 8422 g.winters@datatables.net
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 a.cox@datatables.net
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 c.kelly@datatables.net
Airi Satou Accountant $162,700 Tokyo 5407 a.satou@datatables.net
                                            <script type="text/javascript">
 $(document).ready(function () {
    var datatables_options =
                            {
                                "bAutoWidth": true,
                                "sDom": '<"top"i>rt<"bottom"flp><"clear">', //determine render order for datatables.net items, http://datatables.net/ref#sDom
                                "bPaginate": false, // paging
                                "sPaginationType": "full_numbers", // http://datatables.net/release-datatables/examples/basic_init/alt_pagination.html
                                "iDisplayLength": 10, // page row size
                                "bSort": true, //sorting
                                "bFilter": false, // "search" box
                                "aaSorting": [], // default sort
                                "bInfo": false, // "Showing x to y of z entries" message
                                "bStateSave": false, // save state into a cookie
                                "iCookieDuration": 0, // save state cookie duration
                                "bScrollAutoCss": true, // datatables.net auto styling of scrolling styles, http://datatables.net/forums/discussion/comment/15072
                                "bProcessing": true, // "processing" message while sorting .. doesn't appear to be doing anything
                                "bJQueryUI": false // css classes for jQueryUI themes?
                                //"asStripeClasses": [], // remove odd/even row css classes (they will be assigned elsewhere)

                            };

    datatables_options["sScrollY"] = "450px";
    datatables_options["sScrollX"] = "100%";
    datatables_options["bScrollCollapse"] = true;
    var $datatable = $(".example").dataTable(datatables_options);
    new $.fn.dataTable.FixedColumns($datatable,
                                            {
                                                "iLeftColumns": 1,

                                                //"sLeftWidth": 'relative',
                                                //"iLeftWidth": 20,
                                                "sHeightMatch": "none", /* if there aren't any rows that have wrapping text this would be best because it is much faster in IE8 */
                                                //"sHeightMatch": "semiauto",
                                                //"sHeightMatch": "auto",
                                            });
});

</script>
</body>
<style type="text/css">
th, td {
white-space: nowrap;
padding-left: 40px !important;
padding-right: 40px !important;
}
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</html>
..............................................................................................................................................

screenshot:

enter image description here

Answers

  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin

    Please link to a test case showing the issue, as required in the forum rules.

    Allan

This discussion has been closed.