Datatables不会保留已选择的筛选列数值,如果该数值包含特殊字符。

huangapple go评论87阅读模式
英文:

Datatables does not retain the selected filter column values if the value has special characters

问题

我正在使用级联数据表。它运行正常。然而,似乎如果我选择“Name”或“Office”下的值,所选值不会保留在下拉菜单中。但如果我选择“Position”,则会保留所选值,例如:Director或System Architect。

这是因为列1和列3中的列值包含特殊字符,这可能解释了为什么会出现这种情况。(. - Datatables不会保留已选择的筛选列数值,如果该数值包含特殊字符。 等。是否有解决方法?用户无法知道从下拉菜单中选择了哪个值。谢谢。

链接:https://live.datatables.net/suwopemu/1/edit

<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-js -->
$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  buildSelect( table );
  table.on( 'draw', function () {
    buildSelect( table );
  } );
});

function buildSelect( table ) {
  var counter = 0;
  table.columns( [0, 1, 2] ).every( function () {
    var column = table.column( this, {search: 'applied'} );
    counter++;
    var select = $('<select><option value=""></option></select>')
      .appendTo( $('#dropdown' + counter ).empty() )
      .on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search( val ? '^'+val+'$' : '', true, false )
          .draw();
      });

    column.data().unique().sort().each( function ( d, j ) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });
    
    // 重建将清除现有选择,因此需要重新填充
    var currSearch = column.search();
    if ( currSearch ) {
      select.val( currSearch.substring(1, currSearch.length-1) );
    }
  });
}
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html>
  <head>
    <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>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox">
<p>Name: <span id="dropdown1">
  </span>
</p>

<p>Position: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</p>
  <button type="button" id="test">Clear Filters</button>
</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>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          
            
          </tr></tbody></table>
</div>

<!-- 结束代码段 -->
英文:

I am using cascading datatables. It works fine. It appears, however, that if I select a value under Name or Office, the selected value is not retained in the dropdown menu. However, if I select Postion, it retains the selected value, for example: Director or System Architect.

It is because Columns 1 and 3 have special characters in the column values, which probably explains why it does this. (. - Datatables不会保留已选择的筛选列数值,如果该数值包含特殊字符。 etc. Is there a way around this? Users are unable to tell which value was selected from the dropdown menu.Thanks.

https://live.datatables.net/suwopemu/1/edit

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
var table = $(&#39;#example&#39;).DataTable({
responsive: true,
searching: true
});
buildSelect( table );
table.on( &#39;draw&#39;, function () {
buildSelect( table );
} );
});
function buildSelect( table ) {
var counter = 0;
table.columns( [0, 1, 2] ).every( function () {
var column = table.column( this, {search: &#39;applied&#39;} );
counter++;
var select = $(&#39;&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;&#39;)
.appendTo( $( &#39;#dropdown&#39; + counter ).empty() )
.on( &#39;change&#39;, function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? &#39;^&#39;+val+&#39;$&#39; : &#39;&#39;, true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( &#39;&lt;option value=&quot;&#39;+d+&#39;&quot;&gt;&#39;+d+&#39;&lt;/option&gt;&#39; );
} );
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if ( currSearch ) {
select.val( currSearch.substring(1, currSearch.length-1) );
}
} );
}

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://nightly.datatables.net/css/jquery.dataTables.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;https://nightly.datatables.net/js/jquery.dataTables.js&quot;&gt;&lt;/script&gt;
&lt;meta charset=utf-8 /&gt;
&lt;title&gt;DataTables - JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;div class=&quot;searchbox&quot;&gt;
&lt;p&gt;Name: &lt;span id=&quot;dropdown1&quot;&gt;
&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;Postion: &lt;span id=&quot;dropdown2&quot;&gt;
&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;Office: &lt;span id=&quot;dropdown3&quot;&gt;
&lt;/span&gt;
&lt;/p&gt;
&lt;button type=&quot;button&quot; id=&quot;test&quot;&gt;Clear Filters&lt;/button&gt;
&lt;/div&gt;
&lt;table id=&quot;example&quot; class=&quot;cell-border row-border stripe dataTable no-footer dtr-inline&quot; role=&quot;grid&quot; style=&quot; width: 100%; padding-top: 10px;&quot;&gt;&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&amp;#160;&lt;/th&gt;
&lt;th&gt;&amp;#160;&lt;/th&gt;
&lt;th&gt;&amp;#160;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; style=&quot; text-align: center;&quot;&gt;Information&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Position&lt;/th&gt;
&lt;th&gt;Office&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Start date&lt;/th&gt;
&lt;th&gt;Salary&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;ID.AI&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2011/04/25&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Garrett -2&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;63&lt;/td&gt;
&lt;td&gt;2011/07/25&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ashton.1 -2&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;66&lt;/td&gt;
&lt;td&gt;2009/01/12&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

问题是column.search()返回一个用于匹配的正则表达式模式。因此,我简单地修改了以下部分:

// 重建将清除现有选择,因此需要重新填充
var currSearch = column.search();
if ( currSearch ) {
  select.val( currSearch.substring(1, currSearch.length-1) );
}

来使用正则表达式查找唯一列表中的值:

// 重建将清除现有选择,因此需要重新填充
var currSearch = column.search();
if ( currSearch ) {
  select.val( column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch)) ) );
}

以下是此操作的示例:

<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-js -->
$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  buildSelect(table);
  table.on('draw', function() {
    buildSelect(table);
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value=""></option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });

    // 重建将清除现有选择,因此需要重新填充
    var currSearch = column.search();
    if (currSearch) {
      // ** 我的更改 **
      // 使用正则表达式从列的唯一值中找到所选值。
      // 这将使用从column.search返回的正则表达式在column.data().unique中找到第一个匹配项
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch)));
    }
  });
}

<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/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: <span id="dropdown1">
    </span>
  </p>

  <p>Position: <span id="dropdown2">
    </span>
  </p>

  <p>Office: <span id="dropdown3">
    </span>
  </p>
  <button type="button" id="test">Clear Filters</button>
</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>ID.AI</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$3,120</td>
    </tr>
    <tr>
      <td>Garrett -2</td>
      <td>Director</td>
      <td>Edinburgh</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$5,300</td>
    </tr>
    <tr>
      <td>Ashton.1 -2</td>
      <td>Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$4,800</td>
    </tr>
  </tbody>
</table>

<!-- 结束代码段 -->

希望这对你有帮助!

英文:

The problem is column.search() is returning a regex pattern to match. So I simply modified the

// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if ( currSearch ) {
select.val( currSearch.substring(1, currSearch.length-1) );
}

section to use regEx and find the value in the unique list

// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if ( currSearch ) {
select.val( column.data().unique().toArray().find((e) =&gt; e.match(new RegExp(currSearch))) );
}

Here is a working example of this in action

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
var table = $(&#39;#example&#39;).DataTable({
responsive: true,
searching: true
});
buildSelect(table);
table.on(&#39;draw&#39;, function() {
buildSelect(table);
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: &#39;applied&#39;
});
counter++;
var select = $(&#39;&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;&#39;)
.appendTo($(&#39;#dropdown&#39; + counter).empty())
.on(&#39;change&#39;, function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? &#39;^&#39; + val + &#39;$&#39; : &#39;&#39;, true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append(&#39;&lt;option value=&quot;&#39; + d + &#39;&quot;&gt;&#39; + d + &#39;&lt;/option&gt;&#39;);
});
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// ** MY CHANGE **
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) =&gt; e.match(new RegExp(currSearch))));
}
});
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://nightly.datatables.net/css/jquery.dataTables.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;https://nightly.datatables.net/js/jquery.dataTables.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;searchbox&quot;&gt;
&lt;p&gt;Name: &lt;span id=&quot;dropdown1&quot;&gt;
&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;Postion: &lt;span id=&quot;dropdown2&quot;&gt;
&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;Office: &lt;span id=&quot;dropdown3&quot;&gt;
&lt;/span&gt;
&lt;/p&gt;
&lt;button type=&quot;button&quot; id=&quot;test&quot;&gt;Clear Filters&lt;/button&gt;
&lt;/div&gt;
&lt;table id=&quot;example&quot; class=&quot;cell-border row-border stripe dataTable no-footer dtr-inline&quot; role=&quot;grid&quot; style=&quot; width: 100%; padding-top: 10px;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&amp;#160;&lt;/th&gt;
&lt;th&gt;&amp;#160;&lt;/th&gt;
&lt;th&gt;&amp;#160;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; style=&quot; text-align: center;&quot;&gt;Information&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Position&lt;/th&gt;
&lt;th&gt;Office&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Start date&lt;/th&gt;
&lt;th&gt;Salary&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;ID.AI&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2011/04/25&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Garrett -2&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;63&lt;/td&gt;
&lt;td&gt;2011/07/25&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ashton.1 -2&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;66&lt;/td&gt;
&lt;td&gt;2009/01/12&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月4日 05:00:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75631827.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定