3

I have created a table with scrollbar in which header is fixed while scrolling y and header is scrolling while scrolling table x. Here is my code.

$(function () {
 $('table').on('scroll', function () {
  $("table > *").width($("table").width() + $("table").scrollLeft());
  });
});
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

But problem is that I can't implement this functionality with mcustomscrollbar. And I want this functionality of scrolling with mcustomscrollbar or with any other attractive CSS on scrollbar which can not be affected by browser. If anyone knows the solution of this problem, then answer will be appreciated.

Akshay Vaghasiya
  • 1,597
  • 9
  • 36
  • 60

3 Answers3

1

Check the following:

add this in your script - 

$(".dataTables_scrollBody").mCustomScrollbar({  // custom scroll bar plugin
theme:"minimal-dark",  // custom scroll theme set
axis: "yx",     // custom scroll ver,hor scroll
callbacks: {    // callback for thead,tbody scroll
whileScrolling: function() {
$(".dataTables_scrollHead").scrollLeft(this.mcs.left *-1);
},
},
});

Hope, It helps. Need more info check this also -

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/callbacks_example.html

Jayavel
  • 3,377
  • 2
  • 21
  • 35
1

Make a table like this

<div class="graphData" data-mcs-axis="x">
    <table class="fixed_headers">
        <thead>
            <tr><th>data1</th><th>data2</th><th>data3</th></tr>   
        </thead>
        <tbody >
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            ...
        </tbody>
    </table>
</div>

Add script before </body>

$(window).load(function(){

  $("table.fixed_headers tbody").mCustomScrollbar({
    mouseWheel:{ preventDefault: true },
    autoExpandScrollbar:true
  });

  $(".graphData").mCustomScrollbar({
            scrollbarPosition:"outside"
  });
});

this script will add x scroll to header and xy scroll to tbody

Muhammad Hashir Anwaar
  • 604
  • 5
  • 24
0

Check following way you can use mCustomScrollbar. Use $("tbody").mCustomScrollbar({

$(function () {
 $('table').on('scroll', function () {
  $("table > *").width($("table").width() + $("table").scrollLeft());
  });

  $("tbody").mCustomScrollbar({
    theme:"light-3",
    scrollButtons:{
      enable:false
    },
    mouseWheel:{ preventDefault: true },
    scrollbarPosition: 'inside',
    autoExpandScrollbar:true,
    theme: 'dark',
     axis:"yx",
                setWidth: "auto"
  });

});
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow: hidden;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow: hidden;
    height: 140px;
}

td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<script src="https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js"></script>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>
ketan
  • 19,129
  • 42
  • 60
  • 98