搜索
搜索

DataTables-如何为每一行返回特定列的值

Glyn 发表于 Dev
48
格林

我正在尝试遍历DataTable以获取两列的值，第一列包含ID和ID，第二列为数量，因此我可以创建要传递的数组，以使用数据库上的数量更新ID。我的代码返回“未定义”。我如何为每一行返回“ x”列中的值？

function disperse() {
    memDispTable.rows().every(function() {
        var row = this.data();
        console.log(row[0]);
    //  Create array to send for updating
    });
}

在数据表列0是：

{data: 'cdId',
visible: false,
searchable: false},

第6列（要更新的金额）是一个输入字段：

{data: null,
className: "center",
defaultContent: '<input class="ilValue" type="number" min="0" max="99999.99" step=".01" placeholder="0.00">'
},

的结果：

    var row = this.data();
    console.log(row);

是：

cdFirstName: "Tendon"
cdId: "MTQ5"
cdSurname: "Achilles"
grpId: "MQ=="
section: "Cub"
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

我现在遍历行。第一行包含一个金额：

在此处输入图片说明

但是，当我遍历Total时会返回另一行：

在此处输入图片说明

当我排序总计再次返回不同的行：

在此处输入图片说明

排序后，页面上的“总数”与正确的行保持一致（即Glyn Bartlett）。

我的代码是：

function postDispersements() {
    //Disperse the amounts to each person
    
    //Iterate through each row
    memDispTable.rows().data().each( function ( rowData, index ) {
        
        var scoutNo = rowData.scoutNumber;
        var surname = rowData.cdSurname;
        var firstName = rowData.cdFirstName;
        
        var amtNode = memDispTable.cells(index, 7).nodes().to$()[0];//Total column
        var amt = parseFloat($('input', amtNode ).val());
        
        if (isNaN(amt)) {
          amt = 0.0;
        }
        amt = (Math.floor((amt + Number.EPSILON) * 100) / 100).toFixed(2);
        
        //There are a large number of records so only log the rows with an amount
        if (amt > 0) {
            console.log("scoutNo: " + scoutNo + " surname: " + surname + " firstName: " + firstName + " amt: " + amt);
        }
    });
}
安德鲁杰姆斯

修改后的答案：

您遍历行数据的函数memDispTable.rows().every(function() {...})看起来不错。

但是，每一行中的数据结构可以是一个数组：

[ "value 1", "value2", "value3", ... ]

或对象：

{ field1: "value1", field2: "value2", field3: "value3", ... }

如果您不能使用数组索引访问行数据中的值（例如）row[0]，则表明您需要使用字段名称访问数据：row.field1。

您可以通过将整个行打印到控制台来仔细检查行的结构：

memDispTable.rows().every(function() {
  var row = this.data();
  console.log(row);
});

这将向您显示行结构-并且，如果它是一个对象，您还将看到需要使用的字段名称。

是否将行数据作为数组或对象，取决于首先如何将数据提供给DataTables。通常，它是通过JSON数据进行的-因此，它取决于该JSON的结构。

修订方法

根据问题中更新的信息，您将获得类似于以下示例的数据（用于两行测试数据）：

[
  { "cdFirstName": "Tendon",
    "cdId": "MTQ5",
    "cdSurname": "Achilles",
    "grpId": "MQ==",
    "section": "Cub" 
  },
  { "cdFirstName": "John",
    "cdId": "MTQ6",
    "cdSurname": "Smith",
    "grpId": "MQ==",
    "section": "Cub" 
  }
]

这意味着您可以使用以下命令访问每一行中的值：

memDispTable.rows().every(function() {
  var row = this.data();
  console.log(row.cdId);
});

因此，您的评论非常接近this.row.cdId-您只需要“本”部分。

但是，您还希望从每一行获取输入的金额-这需要一种不同的方法。由于金额是由用户手动输入到字段中的，因此该数据对于DataTables而言不是直接可见的-它是HTML表的一部分，而不是DataTables对象的一部分。

我们可以将上面的row()迭代器与以前使用的相同技术结合起来，以跟踪总计的总分配量，从而获得所需的东西。

那将是这样的：

function disperse() {
  memDispTable.rows().data().each( function ( rowData, index ) {
    var amtNode = memDispTable.cells(index, 5).nodes().to$()[0];
    var amt = parseFloat($('input', amtNode ).val());
    if (isNaN(amt)) {
      amt = 0.0;
    } 
    console.log( "ID: " + rowData.cdId + ", amount: " + amt );
  } );
}

这将遍历每个表行以获取cdId值-位于DataTables中。

我们还使用一个cells(index, 5)函数来获取当前行中的特定单元格（5）。然后，我们使用该nodes()功能来帮助DataTables访问该特定单元格中用户输入的值。

放在一起，我们有类似的东西-如果您想尝试一下（然后适应您的特定代码），它应该作为独立的测试文件工作：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.48/BigInteger.min.js"></script>

</head>

<body>

<div style="margin: 20px;">
    
    <div id="showsum">Grand Total: $0.00</div>
    <br><br>

    <table id="demo" class="display dataTable cell-border" style="width:100%">
    </table>

</div>

<script type="text/javascript">

var dataSet = [
  { "cdFirstName": "Tendon",
    "cdId": "MTQ5",
    "cdSurname": "Achilles",
    "grpId": "MQ==",
    "section": "Cub" 
  },
  { "cdFirstName": "John",
    "cdId": "MTQ6",
    "cdSurname": "Smith",
    "grpId": "MQ==",
    "section": "Cub" 
  }
];

var table;

function doSum() {
  var sum = 0.0;
  memDispTable.columns(5).nodes().to$()[0].forEach(function (item) {
    var amt = parseFloat($('input', item ).val());
    if (!isNaN(amt)) {
        sum += amt;
    }
  });
  sum = (Math.round((sum + Number.EPSILON) * 100) / 100).toFixed(2);
  $('#showsum').text("Grand Total: $" + sum);

  disperse();
}

function disperse() {
  memDispTable.rows().data().each( function ( rowData, index ) {
    var amtNode = memDispTable.cells(index, 5).nodes().to$()[0];
    var amt = parseFloat($('input', amtNode ).val());
    if (isNaN(amt)) {
      amt = 0.0;
    } 
    console.log( "ID: " + rowData.cdId + ", amount: " + amt );
  } );
}

  $(document).ready(function() {

    memDispTable = $('#demo').DataTable( {
      "data": dataSet,
      "columns": [
        { title: "ID", "data": "cdId", "visible": false, "searchable": false },
        { title: "First Name", "data": "cdFirstName" },
        { title: "Surname", "data": "cdSurname" },
        { title: "Group", "data": "grpId" },
        { title: "Section", "data": "section" },
        { title: "Amount" }
      ],
      "columnDefs": [ {
        "targets": 5,
        "name": "amt",
        "data": function ( row, type, val, meta ) {
          return '<input type="number" min="0" max="99999.99" step=".01" placeholder="0.00" onchange="doSum()">';
        }
      } ]
    } );

    disperse();

  } );

</script>

</body>
</html>

此演示将以下内容打印到控制台：

ID: MTQ5, amount: 0
ID: MTQ6, amount: 0

随着金额的更改，打印输出显示更改：

ID: MTQ5, amount: 1.23
ID: MTQ6, amount: 456.78

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

DataTables所选行的数据属性

jQuery dataTables-获取过滤的列值

jQuery DataTables获取选定的行值

DataTables：根据列中的值过滤行

从jQuery DataTables中的呈现跳过一行

DataTables 1.10列数

jQuery DataTables呈现列数据

在一行中添加原始html后更新dataTables

jQuery DataTables根据多个值过滤行

DataTables获取特定列的类

如何从DataTables行获取值？

如何使jQuery-DataTables响应？

如何为首次出现某个特定值的每一行返回列索引

jQuery DataTables移动列

如何为熊猫数据框的每一行打印索引值，列名和列数据？

每列中的DataTables全局Regex搜索

如何使用DataTables筛选出特定行

如何为另一列中的每一行重复所有列值

Datatables：如何呈现<a> html标签？

对于每一行，如何使用Datatables根据特定列上的值在<th>上添加类名称

如何为该分组的列着色？（jQuery DataTables行分组）

使DataTables列基于数组可变

jQuery DataTables行高亮显示

如何为dataTables中的元素运行popover？

如何为 DataTables 中的按钮分配 ID？

如何为文件的每一行添加交互值？

根据行值显示的 DataTables 按钮

如何搜索与 DataTables 相关的列？

根据特定列值预过滤 jQuery DataTables AJAX 结果

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    Modbus Python施耐德PM5300

  5. 5

    为什么Object.hashCode（）不遵循Java代码约定

  6. 6

    如何正确比较 scala.xml 节点？

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    在令牌内联程序集错误之前预期为 ')'

  9. 9

    数据表中有多个子行，asp.net核心中来自sql server的数据

  10. 10

    VBA 自动化错误：-2147221080 (800401a8)

  11. 11

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  12. 12

    如何在JavaScript中获取数组的第n个元素？

  13. 13

    检查嵌套列表中的长度是否相同

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    ES5的代理替代

  17. 17

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  18. 18

    如何监视应用程序而不是单个进程的CPU使用率？

  19. 19

    如何检查字符串输入的格式

  20. 20

    解决类Koin的实例时出错

  21. 21

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

热门标签

归档