如何在datatables.js中滚动到表的正文 [英] how to give scroll to tbody of a table in datatables.js

问题描述

我正在为我的表使用datatables插件，因为我只想向tbody提供滚动选项，以使thead保持不变. 初始化数据表后，我尝试更改tbody的css属性，但无法正常工作，并且尝试了数据表的scrollY参数，但无济于事.

I am using datatables plugin for my table,In that i want to provide scroll option only to tbody so that thead keeps fixed.Currently i am giving scroll option to div that contains table which is not efficient way. After initializing datatable,i tried to change the tbody css property but it wont work and also i tried scrollY parameter of datatable but nothing use.

有什么想法吗?

jquery

      var oTable = $('#tbcont').dataTable({
            "bJQueryUI": true,
            "bAutoWidth": false,                
            "bFilter": true,
            "scrollY": "100px",
            "scrollCollapse":true,
            "paging":false
         });

推荐答案

最近很抱歉自己回答了这个问题，这个答案是针对一般表而不是数据表的，如果您想应用以下方法，我们需要更改 thead td 到 td td div

Sorry to answer this question myself lately, this answer is for general tables not datatables if you want to apply the below approach we need to change thead td to thead td div

下面是jsfiddle链接

below is the jsfiddle link

http://jsfiddle.net/v2t2k8ke/2/

HTML:

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

CSS:

 #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }

jQuery:

 var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
    ];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '<td>' + key + '</td>';
   });
   var stb = '';        
   $.each(data, function (key, value) {
       stb += '<tr>';
       $.each(value, function (key, value) {
       stb += '<td>' + value + '</td>';
       });
       stb += '</tr>';
    });
      $('#tbl_cnt thead tr').append(sth);
      $('#tbl_cnt tbody').append(stb);
      setTimeout(function () {
      var col_cnt=0 
      $.each(data[0], function (key, value) {col_cnt++;});    
      $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
      $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

这篇关于如何在datatables.js中滚动到表的正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！