时间戳

首页 > 解决方案 > 基于 Alt 字符串的 DataTables 过滤

javascript - 基于 Alt 字符串的 DataTables 过滤

问题描述

使用 DataTables 1.10.19 和这个插件，我使用alt属性作为数据进行排序。

这行得通；

{
    targets: [7],
    type: 'alt-string',
    render: function(data, type, row) {
        if (data == 1) {
            return '<a href="example.com"><i class="icon-ok" alt="Processed"></i></a>';
        }
    }
}

这不起作用；

{
    targets: [7],
    type: 'alt-string',
    render: function(data, type, row) {
        if (data == 1) {
            return '<a href="example.com?id=' + row[0] + '&approvalcode=' + row[9] + '"><i class="icon-ok" alt="Processed"></i></a>';
        }
    }
}

似乎是当我添加rowURL 查询字符串时它会破坏alt过滤器，尽管其他一切都按预期工作。

插件代码如下；

/**
 * Sort on the 'alt' tag of images in a column. This is particularly useful if
 * you have a column of images (ticks and crosses for example) and you want to
 * control the sorting using the alt tag.
 *
 *  @name Alt string
 *  @summary Use the `alt` attribute of an image tag as the data to sort upon.
 *  @author _Jumpy_
 *
 *  @example
 *    $('#example').dataTable( {
 *       columnDefs: [
 *         { type: 'alt-string', targets: 0 }
 *       ]
 *    } );
 */

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "alt-string-pre": function ( a ) {
        return a.match(/alt="(.*?)"/)[1].toLowerCase();
    },

    "alt-string-asc": function( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "alt-string-desc": function(a,b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

标签： javascriptjqueryhtmldatatablesfiltering

解决方案

第一列的初始值为0或1。如果该值是1插入查询参数的链接，<i>则将获得alt="Processed". 否则将插入不带参数的链接，并且 alt 值为"Not Processed". 然后，渲染的表格将按<i>第一列内部的 alt 属性进行排序。我也只是将 html 字符串与+. 我将数据值解析为 int，因为它是作为字符串传递的。如果我不这样做，它将永远不会附加查询参数。

$(document).ready(function() {
  $("#example").DataTable({
    columnDefs: [
      {
        type: "alt-string",
        targets: 0,
        render: function(data, type, row, meta) {
          if (parseInt(data) === 1) {
            return (
              '<a href="www.example.com?id=' +
              row[2] +
              "&approvalcode=" +
              row[3] +
              '"><i class="icon-ok" alt="Processed">link' +
              row[2] +
              "</i></a>"
            );
          } else {
            return (
              '<a href="www.example.com"><i class="icon-ok" alt="New">link' +
              row[2] +
              "</i></a>"
            );
          }
        }
      }
    ]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/alt-string.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Link</th>
      <th>Condition</th>
      <th>ID</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1007</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>2</td>
      <td>7001</td>
    </tr>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>3</td>
      <td>42</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>4</td>
      <td>1337</td>
    </tr>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>5</td>
      <td>80085</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Link</th>
      <th>Condition</th>
      <th>ID</th>
      <th>Code</th>
    </tr>
  </tfoot>
</table>

推荐阅读