Question

我想在datatables表中创建第二个标头，该表在第二个标头中具有下拉列表。数据表需要启用垂直滚动。因此，根据此documentation

，我已将数据表配置为包括以下内容

  scrollY:"100px",
  scrollCollapse:true,
  paging:false,

但是，当我将scrollY设置为任何值时，我的下拉列表将停止工作

将ScrollY设置为“ 100px”

当我排除ScrollY时，该下拉列表非常适合显示所有名称

有关脚本，请参见下文，有关设置了ScrollY的jsfiddle，请参见此处

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css' rel='stylesheet' />
  <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th rowspan="1"> 
                <select class="selectpicker">
                    <option>Garret</option>
                    <option>Tiger</option>
                    <option>Name 3</option>
                    <option>Name 4</option>
                    <option>Name 5</option>
                    <option>Name 6</option>
                </select>
              </th>
              <th colspan="1">HR Information</th>
              <th colspan="1">Contact</th>
            </tr>
            <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Salary</th>
              <th>Office</th>
              <th>Extn.</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
<script>
data = [
  {
    DT_RowId: "row_1",
    first_name: "Tiger",
    last_name: "Nixon",
    position: "System Architect",
    email: "t.nixon@datatables.net",
    office: "Edinburgh",
    extn: "5421",
    age: "61",
    salary: "320800",
    start_date: "2011-04-25"
  },
  {
    DT_RowId: "row_2",
    first_name: "Garrett",
    last_name: "Winters",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "Tokyo",
    extn: "8422",
    age: "63",
    salary: "170750",
    start_date: "2011-07-25"
  },
  {
    DT_RowId: "row_2",
    first_name: "Garrett",
    last_name: "Winters",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "Tokyo",
    extn: "8422",
    age: "63",
    salary: "170750",
    start_date: "2011-07-25"
  },
  {
    DT_RowId: "row_2",
    first_name: "Garrett",
    last_name: "Winters",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "Tokyo",
    extn: "8422",
    age: "63",
    salary: "170750",
    start_date: "2011-07-25"
  },
  {
    DT_RowId: "row_2",
    first_name: "Garrett",
    last_name: "Winters",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "Tokyo",
    extn: "8422",
    age: "63",
    salary: "170750",
    start_date: "2011-07-25"
  }
];


$("#example").DataTable({
  data: data,
  scrollY:"100px",
  scrollCollapse:true,
  paging:false,
  columns: [
    { data: "first_name",visible:true},
    { data: "position"},
    { data: "extn" },
    { data: "salary"},
    { data: "age" ,visible:false}
  ]
});
</script>
</body>
</html>

如何创建一个垂直滚动数据表，该表具有第二个标题行，在第二个标题行中具有下拉选项？

0 个答案: