DataTables：切換到服務器端處理后 fnGetData 不起作用

Question

我已在 DataTables（1.10 版）中從客戶端處理切換到服務器端處理以提高性能（在“dom”下方添加行）。
DataTables 本身按預期工作，但從那時起我就無法從單行或單元格獲取數據。

var tableDT = $('#tblReport').dataTable({
    dom: 'Bfrtip',
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "data.php",
    "aoColumns": aoCols,
    // ...

在我為此目的使用“ fnGetData ”之前，如下例所示，這對我來說效果很好，但現在返回未定義（我沒有收到錯誤）。
在使用服務器端處理或我現在必須在此處更改的任何內容時，是否有另一種方法可以做到這一點？

$(document).on('click', '.showPrinters', function(e) {
    e.preventDefault();                         
    currentRow = $(this).closest('tr');             
    var itemId = $('#tblReport').dataTable().fnGetData(currentRow)[0]; // this should return the text of the first td (in my case it is hidden by default)
    // ...

我希望有人能幫我解決這個問題。

謝謝，湯姆

Answer 1

嗨，如果您從數據表中獲取數據，如果數據匹配，您可以通過 0 索引唯一值獲取行 alldata

如果你的數據表 var = tableDT

var indexes = **tableDT**.rows().eq(0).filter(function (rowIdx) {
    return **tableDT**.cell(rowIdx, 0).data() == id ? true : false;
});

var row = view_table.rows(indexes)
        .nodes();

//這里你會得到行的所有數據tableDT.rows(indexes).data()[0];

Answer 2

我在驅動器中共享文件 [https://drive.google.com/file/d/1Iv8Bq1iDGZVW2B82NSP-WqNG6O6brq57/view?usp=sharing][1] 服務器文件和 html

<html>
    <head>
        <title>Test APP</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
        </script>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>     
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <h2>Click on the Edit Icon</h2>
        <table id="view_table" class="display" style="width:100%">
            <thead>
                <tr>
                    <th></th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Edit</th>
                </tr>
            </thead>

        </table>
        <br>
        <div  id="console" style="height:270px; border: 1px dashed #ccc;"></div>
    </body>

    <script type="text/javascript">

        var view_table;
        $(function () {
            initTable();
        });

        function initTable() {

            var action_init = "get_data";

            view_table = $('#view_table').DataTable({

                "ajax": {
                    "url": "server.php",
                    "type": "POST",
                    data: {
                        action: action_init
                    }

                }, responsive: true,
                "processing": true,
                "serverSide": true,
                "columns": [

                    {"data": "id"},
                    {"data": "fname"},
                    {"data": "lname"},
                    {"data": ""},
                ],
                "columnDefs": [
                    {"width": "20px", "targets": [0]},
                    {className: "center-text ", "targets": [2]},
                    {
                        "targets": [0, 1, 2],
                        "orderable": false,
                    },
                    {
                        "targets": [0],
                        "visible": false,
                    },

                    {

                        "render": function (data, type, row) {

                            return '<i class="fa fa-edit edit_item" access="edit"   data-id="' + row["id"] + '" ></i>';
                        },
                        "targets": 3
                    },
                ],
                "order": [[0, "ASC"]]

            });
        }


        //HERE WE GET DATA WHEN CLICK EDIT BTN

        //edit_item LINE 77 CLASS edit_item
        $(document).on("click", ".edit_item", function () {

            var id = ($(this).data("id"));

            if ($(this).hasClass("edit_item")) {
                $("#console").text( );
                $("#console").html("You can parse the <b>getDTRow(id)</b>  AS JSON TO GET DATA <br> <br>" + JSON.stringify(getDTRow(id)));
            }
        });




        function getDTRow(id) {
            var indexes = view_table.rows().eq(0).filter(function (rowIdx) {
                // console.log(rowIdx)
                return view_table.cell(rowIdx, 0).data() == id ? true : false;
            });

            var row = view_table.rows(indexes)
                    .nodes();
            return view_table.rows(indexes).data()[0];

        }

    </script>

</html>

DataTables：切換到服務器端處理后 fnGetData 不起作用

問題描述

2 個解決方案

解決方案1
1 2020-11-16 07:07:10

解決方案2
1 已采納 2020-11-17 05:24:56

DataTables：切換到服務器端處理后 fnGetData 不起作用

問題描述

2 個解決方案

解決方案1 1 2020-11-16 07:07:10

解決方案2 1 已采納 2020-11-17 05:24:56

解決方案1
1 2020-11-16 07:07:10

解決方案2
1 已采納 2020-11-17 05:24:56