Ajax动态局部刷新table表格内容——精简jQuery代码⽰例 这是我的table表格，内容部分加了个Id=”tabletext“ ,⽤于后续获取数据覆盖区域，也就是所谓的动态刷新这个table的内容
<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>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</tbody>
</table>
1.Javascript刷新效果
先写⼀个js更新table的⽅法，数据是假的，但这个看起来也是实现了Ajax更新的效果，也就是局部刷新table。js代码很简单：
1.到id=test的表格内容部分，
2.直接⽤$("#").html()替换table⾥的内容
<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);
//这⼀句是加载页⾯后3秒钟调⽤⼀次myrefresh⽅法，⽅便看刷新效果
setInterval('myrefresh()',3000);
</script>
好，下⾯我们来上⼀段真正的Ajax代码
2.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 == '') {
jquery ajax例子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;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。