Фильтрация таблиц данных по строкам Alt - PullRequest
0 голосов
/ 20 ноября 2018

Используя 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>';
        }
    }
}

Кажется, что когда я добавляю в строки запроса URL row, это нарушает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));
    }
} );

1 Ответ

0 голосов
/ 20 ноября 2018

Начальное значение первого столбца будет 0 или 1.Если значение равно 1, вставляется ссылка с параметрами запроса, и <i> получает alt="Processed".В противном случае ссылка будет вставлена ​​без параметров, а альтернативное значение будет "Not Processed".Затем обработанная таблица будет упорядочена по атрибутам alt <i> внутри первого столбца.Я также просто объединяю строку 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...