Question

使用DataTables 1.10.19和this plugin，我将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>';
        }
    }
}

似乎在我添加row URL查询字符串时，它中断了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));
    }
} );

Answer 1

第一列的初始值为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>

在替代字符串上过滤数据表

1 个答案: