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

Question

我正在尝试使用第 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());代码 returns 以下示例格式的数据：

Object { 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>

当我单击 link 并转到第 2 页时，会为引用的每个 myArray 实例显示错误：ReferenceError: myArray 未定义。我不明白为什么包含数组的 trowdata 变量没有被传递到第 2 页，尽管数组数据被传递到 console.log.

如能就我做错的地方提出建议，我将不胜感激。

Answer 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;
    } );

然后创建了以下ind.js文件并保存在网站根目录的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>

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

DataTables - Pass Array to Another Page

arrays

datatable

get