jQuery DataTable Search / Filter FAILS on column function generated value

Question

我正在使用 jQuery 数据表（最新版本 1.10.19）jQuery 版本。 3.3.1 搜索表格时未得到预期结果：

if 函数用于返回列的生成值 搜索没有产生想要的结果。

var rowno =1;
var dataSet = [
  ["Airi Satou", "Accountant", "Tokyo"],
  ["Angelica Ramos", "Chief Executive Officer (CEO)", "London"],
  ["Gavin Joyce", "Developer", "Edinburgh"],
  ["Jennifer Chang", "Regional Director", "Singapore"],
  ["Brenden Wagner", "Software Engineer", "San Francisco"],
  ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco"],
  ["Shou Itou", "Regional Marketing", "Tokyo"],
  ["Martena Mccray", "Post-Sales support", "Edinburgh"],
  ["Unity Butler", "Marketing Designer", "San Francisco"]
];

 $(document).ready(function() {

  $('#example').DataTable( {
      data: dataSet,
       "columns": [
// ** DataTable search / filter FAIL: on column function generated value ***
       // { "data": function ( row, type, val, meta ) {return rowno++ ;}, "title" : "Row No."},
     { "data": function ( row, type, val, meta ) {return "row"+ rowno++ ;}, "title" : "Row No."},
      { "data": 0,"title": "Name"}, 
      { "data": 1,"title": "Position"}, 
      { "data": 2,"title": "Office"}
    ]
  } );

} );

见：jsfiddle：https://jsfiddle.net/scriptgurus/q4cvr9a8/

搜索“row1..”或row2..row3..我们应该得到带有“row1”等的行。

Answer 1

您需要使用特定的东西，因为您所做的就是在 rowno 上添加 always + 1。通常你可以这样做。但是在你的情况下，如果你这样做 console.log(rowno++) 你会看到它添加的次数比你预期的要多，这是因为循环运行了 5 次，所以它总共添加了 45 次。 数组项 (9*5) = 45，所以你有 meta 我看到它返回带有行索引的 meta.row，所以你可以这样做 return "row" + (meta.row + 1) 这样做 + 1 到索引号。

Answer 2

或者，您可以在数据表初始化期间使用带有 meta.row 参数的函数参数来获取正确的行号。

这个元从版本 1.10.1 开始工作

链接：columns.data，columns.render

{ 
  "title" : "Row No.",
  "data": function ( row, type, val, meta ) {
    return "row"+ (meta.row+1);
  }
},

参见下面的示例：

var dataSet = [
  ["Airi Satou", "Accountant", "Tokyo"],
  ["Angelica Ramos", "Chief Executive Officer (CEO)", "London"],
  ["Gavin Joyce", "Developer", "Edinburgh"],
  ["Jennifer Chang", "Regional Director", "Singapore"],
  ["Brenden Wagner", "Software Engineer", "San Francisco"],
  ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco"],
  ["Shou Itou", "Regional Marketing", "Tokyo"],
  ["Martena Mccray", "Post-Sales support", "Edinburgh"],
  ["Unity Butler", "Marketing Designer", "San Francisco"]
];

 $(document).ready(function() {
 
  $('#example').DataTable( {
      data: dataSet,
       "columns": [
        { "title" : "Row No.",
          "data": function ( row, type, val, meta ) {
            return "row"+ (meta.row+1);
          }
        },
        { "data": 0,"title": "Name"}, 
        { "data": 1,"title": "Position"}, 
        { "data": 2,"title": "Office"}
    ]
  } );
  
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="example" class="display" width="100%"></table>