javascript 数据表-如何在排序时忽略HTML标记?

hkmswyz6  于 2023-01-11  发布在  Java
关注(0)|答案(2)|浏览(119)

我需要排序第一列的帮助。我有一列包含字母数字值的混合。我忽略字母值,只按数字值排序。但是,如果列有换行符或
标签,它会打乱排序。请看这里的代码。
http://live.datatables.net/gezazaza/1/edit
例如,在我的表格中,AA-EC-2019 - 82 AA-EC-2019 - 81 AA-EC-2019 - 71应该在"AA-EC-2019 - 58"之后,如果按升序排列,我该如何实现呢?谢谢。

$(document).ready(function() {
   $('#example_full').DataTable({ 
  lengthMenu: 
      [[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50, "All"]],
 responsive: true,
  paging: true,
  searching: true,
  lengthChange: true,
  bInfo: true,
  bSort: true,
  
  columnDefs: [
    {
      targets: 0,
      render: function (data, type, row) {
        if (type === 'sort' || type === 'type') {
          var text = $(data).text();
          var parsedData = text.split('-');
          var n = '000' + parsedData[3];
          var lastNum = parsedData[2] + '0' + n.slice(-3);
          console.log(lastNum);
          return lastNum;
        }
        return data;
      }
    }
  ]
 
 });
});
<!DOCTYPE html>
<html>
  <head>
    <script src="http://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 />

  </head>
  <body>

<table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th data-orderable="false">2</th>
<th data-orderable="false" >3</th>
<th data-orderable="false" >4</th>
</tr>

</thead><tbody>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-43</p></td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-82</br>
  AA-EC-2019-81<br>
  AA-EC-2019-71</p></td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
  
  

</tbody></table>
8ehkhllq

8ehkhllq1#

如果您使用的是PHP应用程序,那么您可以使用data-order属性使用自定义值对列进行排序,如下所示:

<tr>
  <td data-order="<?php echo filter_var('AA-EC-2020-38', FILTER_SANITIZE_NUMBER_INT);?>"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
  <td data-order="<?php echo filter_var('AA-EC-2019-58', FILTER_SANITIZE_NUMBER_INT);?>"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

使用上述数据排序属性后,不再需要添加JS代码进行排序。

643ylb08

643ylb082#

您可以通过将order: [[ 0, 'asc' ]]添加到可日期化参数中来完成此操作:

$(document).ready(function() {
    $('#example_full').DataTable({ 
      lengthMenu:[[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50,"All"]],
      responsive: true,
      paging: true,
      searching: true,
      lengthChange: true,
      bInfo: true,
      order: [[ 0, 'asc' ]]
    });
});
<!DOCTYPE html>
<html>
  <head>
    <script src="http://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 />

  </head>
  <body>

<table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th data-orderable="false">2</th>
<th data-orderable="false" >3</th>
<th data-orderable="false" >4</th>
</tr>

</thead><tbody>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-43</p></td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>

<tr>
  <td nowrap="nowrap"><p>AA-EC-2019-82</br>
  AA-EC-2019-81<br>
  AA-EC-2019-71</p></td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>

  
  

</tbody></table>

相关问题