datables固定列不起作用

时间:2016-11-27 01:25:40

标签: jquery datatables

我正在尝试将固定列用于我的数据表。它就像这样(检查图像)Click to see image

这是我的文件的代码

    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>WeAreFantasy</title>
          <!-- Latest compiled and minified CSS -->
          <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
          <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
          <link rel="stylesheet" href="/assets/css/style.css">


      <style media="screen">
      /*Change the size here*/
      th, td { white-space: nowrap; }
      div.dataTables_wrapper {
          width: 800px;
          margin: 0 auto;
      }

    div.tooltip-inner {
        max-width: 350px;
    }


    .nbaposition {
      background-color:#021A3A;
      color:white;
    }
    .highlight {
      background-color:#edb82a;
      color:black;
    }
      </style>
    </head>
    <body>
      <div class="container-fluid NFLTeamTable">
        <div class="row">
          <div style='font-size:24px;' class="col-md-7">
            <h2>What will go here is:</h2>
            <!-- <button class='fadeORdelete' type="button" data-fadeORkeep='All' name="button">All</button>
            <button class='fadeORdelete' type="button" data-fadeORkeep='KEEP' name="button">KEEP</button>
            <button class='fadeORdelete' type="button" data-fadeORkeep='DELETE' name="button">DELETE</button> -->
            <button class='nbaposition' type="button" data-position='All' name="button">All</button>
            <button class='nbaposition' type="button" data-position='PG' name="button">PG</button>
            <button class='nbaposition' type="button" data-position='SG' name="button">SG</button>
            <button class='nbaposition' type="button" data-position='SF' name="button">SF</button>
            <button class='nbaposition' type="button" data-position='PF' name="button">PF</button>
            <button class='nbaposition' type="button" data-position='C' name="button">C</button>

          </div>
          <div style='font-size:24px;' class="col-md-5">
            <h2>My Suggested Fanduel NBA Players</h2>
            <ul class='suggestedPlayersNBA'>
            </ul>
          </div>
        </div>
      </div>
      <div id='playerlist' class="container-fluid NFLtables">
        <div class="row nbafantasy">
          <div class="col-md-12">
            <div class="panel-body beforeResponsive">
              <div class="table-responsive">
                <!-- put images here -->
                <table class="table table-hover tableNbaFantasy secondtablenbafantasy">
                  <thead>
                    <tr style='font-size: 16px;'>
                      <th>Player<a href="#" data-toggle="tooltip" data-placement="top" title="Player names"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>H/A<a href="#" data-toggle="tooltip" data-placement="top" title="Home or away game"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Position<a href="#" data-toggle="tooltip" data-placement="top" title="Position of a player"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Team<a href="#" data-toggle="tooltip" data-placement="top" title="Players current team"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Opp<a href="#" data-toggle="tooltip" data-placement="top" title="What team they're up against"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Condition<a href="#" data-toggle="tooltip" data-placement="top" title="Injury status"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Details<a href="#" data-toggle="tooltip" data-placement="top" title="Details of injury"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>ProjMins<a href="#" data-toggle="tooltip" data-placement="top" title="How many minutes a player is projected to play"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Salary<a href="#" data-toggle="tooltip" data-placement="top" title="Cost of player on Fanduel"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Useage%<a href="#" data-toggle="tooltip" data-placement="top" title="How long a player has control of the ball per possession"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>PPG/L10<a href="#" data-toggle="tooltip" data-placement="top" title="Average fantasy points per game for the last 10 games"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>PPM<a href="#" data-toggle="tooltip" data-placement="top" title="How many fantasy points a player gets per minute"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>OVP<a href="#" data-toggle="tooltip" data-placement="top" title="How well the opponent defends that specific position"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>ProjTeamScore<a href="#" data-toggle="tooltip" data-placement="top" title="Teams projected score"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>GameLine<a href="#" data-toggle="tooltip" data-placement="top" title="Total team points"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>ProjectedPts<a href="#" data-toggle="tooltip" data-placement="top" title="Projected points of a specific player"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Value<a href="#" data-toggle="tooltip" data-placement="top" title="Projected value of a specific player based on projections"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>ExpectedValue<a href="#" data-toggle="tooltip" data-placement="top" title="Projected value of a specific player based on previous games"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>GamesPlayed<a href="#" data-toggle="tooltip" data-placement="top" title="How many games a player has played"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>SalaryAdjust<a href="#" data-toggle="tooltip" data-placement="top" title="How much their salary has either increased or decreased from previous game"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>RecentPerformance<a href="#" data-toggle="tooltip" data-placement="top" title="Their last game compared to their average"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>PTsVPos<a href="#" data-toggle="tooltip" data-placement="top" title="How many points the opponent gives up against a specific position"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>CriteriaRanking<a href="#" data-toggle="tooltip" data-placement="top" title="My rankings for players. 6 is the best. 5 is ok. Everybody below be catious"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                      <th>Keep/Fade<a href="#" data-toggle="tooltip" data-placement="top" title="Our preference of who you should play or fade"><span class="infoicon glyphicon glyphicon-info-sign"></span></a></th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
      <script src='https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js'></script>
    <script type="text/javascript">
      $(function () {
        $('[data-toggle="tooltip"]').tooltip({
          'selector': '',
          'placement': 'top',
          'container':'body'
        })
      });
    </script>

在我的javascript代码中             “scrollY”:300,             “scrollX”:是的,             “scrollCollapse”:是的,             “分页”:错误,             “fixedColumns”:true,

起初我认为这是一个错误的链接和脚本顺序,但我改变了所有周围和ti是相同的事情。所以如果有人能帮助我,我会非常感谢你能做的任何事情!

0 个答案:

没有答案