45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:Ajax动态局部刷新table表格内容——jQuery代码示例

Ajax动态局部刷新table表格内容——jQuery代码示例

2019-04-09 07:05:49 来源:www.45fan.com 【

这是我的table表格,内容部分加了个Id=”tabletext“ ,用于后续获取数据覆盖区域

  <table class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">

            <tr>
              <th>
                任务ID
              </th>
              <th>
                用户名
              </th>
              <th>
                最后运行时间
              </th>
              <th>
                数据包完成数量
              </th>
              <th>
                数据包入库数量
              </th>
              <th>
                状态
              </th>
            </tr>

            <tbody id="tabletext">
            
                <tr>
                  <td>
                    @Html.DisplayFor(modelItem => item.taskId)
                  </td>
                  <td>
                    @Html.DisplayFor(modelItem => item.userName)
                  </td>
                  <td>
                    @Html.DisplayFor(modelItem => item.lastStartTime)
                  </td>
                  <td>
                    @Html.DisplayFor(modelItem => item.finishDataPacketNum)
                  </td>
                  <td>
                    @Html.DisplayFor(modelItem => item.finishRecordNum)
                  </td>
                  <td>
                    @Html.DisplayFor(modelItem => item.taskStatus)
                  </td>
                </tr>
            
            </tbody>
          </table>

先写一个js更新table的方法,数据是假的,这个看起来就是Ajax的效果,也就是局部刷新。

js很简单,找到id=test的表格内容部分,直接用$(”#“).html()替换table里的内容

@section Scripts{
<script>

  function myrefresh() {
  var str ="";
  for(var i = 0; i<5; i++){
    str += "<tr><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>"
  }
}


  $("#test").html(str)

  setInterval('myrefresh()',3000);

</script>
}

好,下面我们来上一段真正的Ajax代码

几个关键的地方:

type:要么是GET,要么是POST,大多数时候两个都可以

data:就用KEY,Value对应拼接好就行,后台的形参和Key对应好,就能接收到

url:一般就是你请求的连接地址了,mvc里的是/Controle/action了

dataType:定义的是回台返回给你的数据格式。

如果后台回传过来的是一个对象,一般这里写json,这样用起来很方便,返回过来就是一个json对象,前端直接当做对象一样调用成员变量。

如果回传过来的是string文本之类的字符串,你就写text就行了,拿到的是一个字符串。如果回传过来的是对象,但你依然在dataType上写了text,那就要写一句var newdata = JSON.pare(data);把这个字符串解析成json对象,这样newdata就成了可以直接调用成员变量的对象了。

success:当你的指令发到后台,执行成功,并成功返回数据后,就会进入这个方法中,此时的data中就包含了你后端返回的值,在success里折腾吧,将data转换成对象后,就可以随便调用。

动态刷新:

所谓的动态刷新其实就是一个替换和覆盖的过程,如果是table的话,内部就是一些<tr><td>的标签,在success里把获取到的数据重新拼接成和原来<teble>中一样的数据格式,就是一堆<tr><td>组成的字符串,然后把你的数据加进去。

好,最后一步,使用$("#id").html(str)这个方法,通过id灯找到你想刷新数据的地方,直接替换掉里面的内容,动态刷新就实现了。

代码如下,稍作修改就能使用。

<script>
 function getTableName() {
    var TableName = $("#id1").val();//从界面某个标签的id获取你要的值
    var DBType = $("#Id2").val();
    if (TableName == "" || TableName == null) {
      alert("没有数据");
    } else {
      $.ajax({
        type: "POST",//用POST传递数据,GET也可以
        url: "/DbColTypeConfig/getDBType",//我用的是MVC,这样可以直接触发对应的Controle
        data: {
          "TableName": TableName,//把要传递的数据组成Jason类型,向后台传递,直接在形参中接收即可
          "DBType": DBType
        },
        dataType: "json",//定义的是返回数据的格式,直接写json就对了,写text的话还要用JSON.pare()再转换一次
        success: function (data) {
          if (data == null || data == '') {
            alert("请联系\n管理员维护数据");
            
          } else {

            var str = "";//把数据组装起来
            for (var i = 0; i < data.dataInfo.length; i++) {
              str += "<tr><td>" + data.dataInfo[i].tableName +
                "</td><td>" + data.dataInfo[i].colName +
                "</td><td>" + data.dataInfo[i].dbType +
                "</td><td>" + data.dataInfo[i].colId +
                "</td><td>" + data.dataInfo[i].defaultValue +
                "</td><td>" + data.dataInfo[i].colType +
                "</td><td>" + data.dataInfo[i].colLength +
                "</td><td>" + data.dataInfo[i].ver +
                "</td><td>" + data.dataInfo[i].isEnable + "</td></tr>";
            }
            $("#tableText").html(str);//把拼好的样式填到指定的位置,一个Ajax就完成了
          }
        }
      });
    }
  };
</script>

后端就是一个简单的action,前端传过来的两个参数用形参来接受

路由对应的就是url:/DbColTypeConfig/getDBType

public class DbColTypeConfigControle : Controle
{
  public DbColTypeConfigViewModel getDBType( string TableName, string DBType)
  {
    if (!string.IsNullOrEmpty(DBType))
    {
      paraDic.Add("DBType", DBType);
    }
    if (!string.IsNullOrEmpty(TableName))
    {
      paraDic.Add("TableName", TableName);
    }

    DbColTypeConfigViewModel dataInfo = new DbColTypeConfigViewModel();

    return dataInfo;
  }
}

Ajax动态局部刷新table表格内容——jQuery代码示例

 

 

 

 

 
 

本文地址:http://www.45fan.com/bcdm/100319.html
Tags: 动态 ajax 局部
编辑:路饭网
  • 上一篇:win10+VS2015+CPU-Only安装与配置Caffe
  • 下一篇:没有了
  • 推广内容
    推荐阅读
    热门推荐
    推荐文章
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部