html 如何使用datatable将信息从一列级联到另一列?

xytpbqjk  于 2023-03-06  发布在  其他
关注(0)|答案(1)|浏览(102)

我在我的项目中使用datatable,并且过滤了顶部的列。过滤效果很好,但是列不能级联。有没有办法将信息从一列级联到另一列(取决于选择)。例如,如果在“名称”下选择Ashton考克斯,只有技术作者应突出显示在职位列下,弗朗西斯科应突出显示在办公室列下。下拉列表中的所有其他值应灰显。
以下是我目前所做的尝试。
下面是我的代码的链接-https://live.datatables.net/rajifejo/2/edit

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });
  $('#dropdown1').on('change', function() {
    table.columns(0).search(this.value).draw();
  });
  $('#dropdown2').on('change', function() {
    table.columns(1).search(this.value).draw();
  });
  $('#dropdown3').on('change', function() {
    table.columns(2).search(this.value).draw();
  });
});
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="searchbox">
  <p>
    Name:
    <select id="dropdown1">
      <option value="">Select</option>
      <option>Ashton Cox</option>
      <option>Brielle Williamson</option>
      <option>Cedric Kelly</option>
    </select>
  </p>
  <p>
    Postion:
    <select id="dropdown2">
      <option value="">Select</option>
      <option>Technical Author</option>
      <option>Integration Specialist</option>
      <option>Javascript Developer</option>
    </select>
  </p>
  <p>
    Office:
    <select id="dropdown3">
      <option value="">Select</option>
      <option>San Francisco</option>
      <option>New York</option>
      <option>Edinburgh</option>
    </select>
  </p>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
  <thead>
    <tr>
      <th>&#160;</th>
      <th>&#160;</th>
      <th>&#160;</th>
      <th colspan="3" style=" text-align: center;">Information</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$3,120</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Director</td>
      <td>Edinburgh</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$5,300</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$4,800</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$3,600</td>
    </tr>
    <tr>
      <td>Jenna Elliott</td>
      <td>Financial Controller</td>
      <td>Edinburgh</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$5,300</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$4,525</td>
    </tr>
  </tbody>
</table>
9nvpjoqh

9nvpjoqh1#

首先我创建了一个对象数组,每个对象都有一个人的信息。每次选择后,我循环通过数组找到正确的对象并将其数据保存在变量中。然后我循环通过其他下拉列表比较它们的文本和我拥有的数据,如果它们匹配,我给adisabled属性。* adisabled**attribute.

$(document).ready(function() {
const person = [{name:'Ashton Cox',position:'Technical Author',office:'San Francisco'},{name:'Brielle Williamson',position:'Integration Specialist',office:'New York'},{name:'Cedric Kelly',position:'Javascript Developer',office:'Edinburgh'}];
var table = $('#example').DataTable({
responsive: true,
searching: true
});
$('#dropdown1').on('change', function () {
table.columns(0).search( this.value ).draw();
let myname = this.value;
let myoffice, myposition;
$.each(person,function(key, val) {
    if(val.name == myname) {
    myoffice = val.office;
    myposition = val.position;
  }
});
$('#dropdown2 option').each(function() {
    if($(this).text() !== myposition) {
    $(this).attr('disabled','');
  }
});
$('#dropdown3 option').each(function() {
    if($(this).text() !== myoffice) {
    $(this).attr('disabled','');
  }
});
});
$('#dropdown2').on('change', function () {
table.columns(1).search( this.value ).draw();
let myposition = this.value;
let myoffice, myname;
$.each(person,function(key, val) {
    if(val.position == myposition) {
    myname = val.name;
    myoffice = val.office;
  }
});
$('#dropdown1 option').each(function() {
    if($(this).text() !== myname) {
    $(this).attr('disabled','');
  }
});
$('#dropdown3 option').each(function() {
    if($(this).text() !== myoffice) {
    $(this).attr('disabled','');
  }
});
} );
$('#dropdown3').on('change', function () {
table.columns(2).search( this.value ).draw();
let myoffice = this.value;
let myposition, myname;
$.each(person,function(key, val) {
    if(val.office == myoffice) {
    myname = val.name;
    myposition = val.position;
  }
});
$('#dropdown1 option').each(function() {
    if($(this).text() !== myname) {
    $(this).attr('disabled','');
  }
});
$('#dropdown2 option').each(function() {
    if($(this).text() !== myposition) {
    $(this).attr('disabled','');
  }
});
} );

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

   
<div class="searchbox">
<p>Name: <select id="dropdown1">
<option value="">Select</option>
<option>Ashton Cox</option>
<option>Brielle Williamson</option>
<option>Cedric Kelly</option>
</select>
</p>

<p>Postion: <select id="dropdown2">
<option value="">Select</option>
<option>Technical Author</option>
<option>Integration Specialist</option>
<option>Javascript Developer</option>
</select>
</p>

<p>Office: <select id="dropdown3">
<option value="">Select</option>
<option>San Francisco</option>
<option>New York</option>
  <option>Edinburgh</option>
</select>
</p>
</div>
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>

          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr></tbody></table>

相关问题