Question

我为此项目创建了一个Rest API，它使用node和javascript显示json数据。我正在尝试在数据表中添加搜索/过滤器，但是我不确定如何以加载数据表的方式添加搜索/过滤器。我已经了解了搜索/过滤器功能，但是应用它的方法不适用于我编写的Javascript。

      <!-- bootstrap & jquery -->

      <script src="https://code.jquery.com/jquery-3.3.1.js">.      </script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>

        <script src = "scripts.js"></script>
   </head>
    <body>
    <br></br>
    <div class="container">
      <h1 align="center">Show JSON data</h1> </br>
      <h3 align="center"> Database </h3> </br>
      <table id="data-table" class="table table-bordered stripe">
        <thead>
          <tr>
            <th> firstName </th>
            <th> lastName </th>
          </tr>
        <thead>
        </table>
</div>

<script>

//way of openening files and making HTTP Requests
var request = new XMLHttpRequest();

 //opens a new connection
request.open('GET', 'http://localhost:5059/users', true)

request.onload = function() {
 var data = JSON.parse(this.response)
 loadTable(data);
}

function loadTable(userData){
 $('#data-table').DataTable( {
   data: userData,
  columns: [
    { data: 'id' },
    { data: 'firstName' },
    { data: 'lastName' }
 ]
} );
}

request.send()

</script>

预期：我希望能够搜索我的Jquery数据表中的每一列。现在，我只能一次搜索所有数据。我正在使用加载表功能来加载数据。

如何使用我的代码在jquery数据表中创建特定的列搜索？

0 个答案: