Question

目标：
当您在id =“搜索”中写入任何字母或数字时，您应该在表格中显示新数据而不刷新网站。使用“刷新”或类似效果的效果是使用F5功能。您更新而不刷新表。

当你输入文本框（id =“搜索”）时，应显示默认数据。

默认数据是：

<table border="1">
<tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
</table>

问题：
我现在不知道如何更新表格中的新数据？

的信息：
*我正在使用asp.nget mvc
*我之前使用过jSon，但我不知道在这种情况下使用它是否相关。也许使用棱角分明或类似的？
*更新的定义是从数据库中检索新信息并过滤表中的当前数据。

谢谢！

<input type="text" name="search" id="searches"><br>

<table border="1">
<tr>
	<th>a</th>
	<th>b</th>
	<th>c</th>
</tr>
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
	<td>5</td>
</tr>
</table>

Answer 1

尝试这样的事情

$('#searches').change(function() {
    $.ajax({
    url:"your serverpage.asp",
    method:"GET"    
    }).done(function(jsonData){
        //do necessary functions to update table contents using the obtained jsonData
    });
});

Answer 2

我不确定jSon，但是如果这是你可以用棱角分明的问题。这适用于版本1，但几乎与angular2相同。请注意，2仍处于测试阶段。

更新：抱歉，误读了这个问题，这不是添加项目，而是过滤。但对于简单的展示案例，我认为已经足够了。

Angular1解决方案：

你的js文件：

 var _text = '';

  $scope.search = {
    text: function(newValue) {
      if (arguments.length) {
        alert('Calling server for new data')
      }
      return arguments.length ? (_text = newValue) : _text;
    }
  };

  $scope.rows = [
    { col1: 'a', col2: 'b', col3: 'c' },
    { col1: '4', col2: '5', col3: '6' },
    { col1: '9', col2: '6', col3: '4' }
  ]

你的HTML：

<table border="1">
  <tr ng-repeat="row in rows | filter: search.text()">
    <th>{{ row.col1 }}</th>
    <th>{{ row.col2 }}</th>
    <th>{{ row.col3 }}</th>
  </tr>
</table>

https://plnkr.co/edit/F5oU3uTLikm3Kz53iMMQ?p=preview

更新2：

如果我理解正确你错过了从后端的检索......我可以告诉你基本的，但它真的取决于你的需要，作为身份验证等等

要实现此目的，您可以将事件添加到搜索框并调用服务器以获取新数据。我更新了plunker，以便在更改输入后调用服务器。

根据输入文本框更新表的数据而不使用刷新功能

2 个答案: