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>
                                        @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>

1.Javascript刷新效果

先写一个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代码 

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 == '') {
                        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;
    }
}