用于按钮单击html页面1的jQuery函数，影响html页面2的列答案

【问题标题】：JQuery function for button click on html page 1, affects columns of html page 2用于按钮单击html页面1的jQuery函数，影响html页面2的列
【发布时间】：2017-05-26 13:09:41
【问题描述】：

我试图弄清楚如何从buttons.html 获取用户按钮点击，以在第二个userinput.html 上动态切换列可见性。我正在为userinput.html 表使用DataTables，并认为我有column.visible 的解决方案。在 DataTables 手册中有一个单击 <a> 并切换列可见性的示例。我正在尝试在 html 文件中应用该逻辑。不幸的是，我尝试过的代码不起作用。这是我得到的：

按钮页面

<!DOCTYPE html>
<html>
<head>
    <title>buttons</title>
  <link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
  <link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>

<h1>Button page</h1>

<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>

用户输入页面

<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
    <thead>
        <tr>
            <th>A</th>
            <th>b</th>
            <th>c</th>
        </tr>
    </thead>
    <tbody>   
        <tr class="ac">
            <td>
                <input type="text" autofocus placeholder="e.g; " name="input" >
            </td>
            <td>
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
        <td>
            <input type="text" placeholder="" name="P" class="h"></td>
    </tr>
    </tbody>
</table>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>

$(document).ready( function () {
    var table = $('#userinput').DataTable(  {
        "paging": false,
        "ordering": false,
        "scrollX" : true,
        "scrollY" : true,
        "scrollCollapse" : true,
        "searching" : false,
        // "stateSave" : true,
      });

    $('button.class1').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
});
;

两个 html 页面上的控制台都没有错误。我认为错误可能是使用了 this 关键字，但我不确定如何调整代码以应用于 html 文件。

不需要将按钮放在单独的页面上，事实上，我很乐意接受任何建设性的批评。

提前谢谢你。

【问题讨论】：

标签： javascript jquery html css datatables

【解决方案1】：

您可以单击一个页面上的按钮以在另一个页面上切换（或任何效果）？因此，您可以使用 webStorage(localstorage, sessiontorga) 或 cookie（请阅读此内容）或类似的东西。您单击按钮并在第一页上使用脚本，但是当您跳到另一个页面时，您的 js 正在重新启动，因此您想要存储数据。

【讨论】：

感谢您的回复@Emil。只是为了确保我理解，如果我使用 localStorage，我将能够跟踪用户在 button.html 上选择了哪些按钮，并且当他们移动到 userinput.html 页面时，他们将看到已被设置为可见/隐藏的列JS。对吗？