DataTables - 将数组传递到另一个页面答案

【问题标题】：DataTables - Pass Array to Another PageDataTables - 将数组传递到另一个页面
【发布时间】：2021-07-02 07:13:11
【问题描述】：

我正在尝试使用第 1 页上的以下脚本将数据表中的一组数据从一个页面传递到另一个页面：

        $('#example tbody').on('click', 'td.details-control', function () {
            console.log( table.row( this ).data() );
            var trowdata = console.log( table.row( this ).data() );
            sessionStorage.setItem('myArray', trowdata);
            window.location.href = 'bmdrecord2.php';
            return false;
        } );

console.log(table.row(this).data());代码以以下示例格式返回数据：

对象 { id: "3", name: "Jason Robertson", position: "Junior Developer", start_date: "2014/01/31" }

并尝试使用第 2 页上的代码接收数据，如下所示：

        $(document).ready(function() {
            var myArray = sessionStorage.getItem('myArray');
        })

并使用第 2 页上的代码显示数据，如下所示：

      <table>
        <tbody>
          <tr>
            <td style="width:25%"><italic><script>document.write(Object.keys[0](myArray));</script></italic></td>   // To display id:
            <td style="width:75%"><strong><script>document.write(Object.values[0](myArray));</script></strong></td>   // To display 3
          <tr>
            <td style="width:25%"><italic><script>document.write(Object.keys[1](myArray));</script></italic></td>  // To display name:
            <td style="width:75%"><strong><script>document.write(Object.values[1](myArray));</script></strong></td>   // To display Jason Robertson
          </tr>
          <tr>
            <td style="width:25%"><italic><script>document.write(Object.keys[2](myArray));</script></italic></td>   // To display position:
            <td style="width:75%"><strong><script>document.write(Object.values[2](myArray));</script></strong></td>   // To display Junior Developer
          </tr>
          <tr>
            <td style="width:25%"><italic><script>document.write(Object.keys[3](myArray));</script></italic></td>   // To display start_date:
            <td style="width:75%"><strong><script>document.write(Object.values[3](myArray));</script></strong></td>   // To display 2014/01/31
          </tr>
        </tbody>
      </table>

当我单击该链接并转到第 2 页时，对于所引用的每个 myArray 实例都会显示错误：ReferenceError: myArray is not defined。我不明白为什么包含数组的 trowdata 变量没有被传递到第 2 页，尽管数组数据被传递到 console.log。

如果我在哪里做错了，我将不胜感激。

【问题讨论】：

标签： arrays datatable get

【解决方案1】：

我设法使用以下代码找到了问题的解决方案：

第 1 页 （将数组传递到第 2 页）：

$('#example tbody').on('click', 'td.details-control', function () {
        var rowArray = table.row( this ).data();
        localStorage.setItem( 'bmddata', JSON.stringify( rowArray ) );
        window.location.href = 'bmdrecord.php';
        return false;
    } );

随后在网站根目录下的js文件夹下创建并保存了以下ind.js文件：

$(document).ready(function() {
  var bmdArray = "";
  var bmdArray = JSON.parse( localStorage.getItem('bmddata') );
  document.getElementById("indKey0").innerHTML = Object.keys(bmdArray)[0];
  document.getElementById("indValue0").innerHTML = Object.values(bmdArray)[0];
  document.getElementById("indKey1").innerHTML = Object.keys(bmdArray)[1];
  document.getElementById("indValue1").innerHTML = Object.values(bmdArray)[1];
  document.getElementById("indKey2").innerHTML = Object.keys(bmdArray)[2];
  document.getElementById("indValue2").innerHTML = Object.values(bmdArray)[2];
  document.getElementById("indKey3").innerHTML = Object.keys(bmdArray)[3];
  document.getElementById("indValue3").innerHTML = Object.values(bmdArray)[3];
})

然后使用下面的代码在第2页上显示数据：

    <table>
      <tbody>
        <tr>
          <th class="toTitle" style="width:25%"><span id="indKey0"></span>:</th>   <!-- To display id:  -->
          <td id="indValue0" style="width:75%"><strong></strong></td>   <!-- To display 3  -->
        </tr>
        <tr>
          <th class="toTitle" style="width:25%"><span id="indKey1"></span>:</th>    <!-- To display name:  -->
          <td id="indValue1" style="width:75%"><strong></strong></td>   <!-- To display Jason Robertson  -->
        </tr>
        <tr>
          <th class="toTitle" style="width:25%"><span id="indKey2"></span>:</th>    <!-- To display position:  -->
          <td id="indValue2" style="width:75%"><strong></strong></td>   <!-- To display Junior Developer  -->
        </tr>
        <tr>
          <th class="toTitle" style="width:25%"><span id="indKey3"></span>:</th>    <!-- To display start_date:  -->
          <td id="indValue3" style="width:75%"><strong></strong></td>   <!-- To display 2014/01/31  -->
        </tr>
        <tr>
          <th class="toTitle" style="width:25%"><span id="indKey4"></span>:</th>    <!-- To display Salary:  -->
          <td id="indValue4" style="width:75%"><strong></strong></td>   <!-- To display £20,000  -->
        </tr>
      </tbody>
    </table>

...

<script src="js/ind.js"></script>

【讨论】：