数据表正确搜索数据但当我从搜索框中删除搜索文本数据时,表格中没有再次出现

时间:2017-11-16 11:50:39

标签: jquery ajax model-view-controller

  <table id="example1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Vendor Code</th>
                                <th>Vendor Name</th>
                                <th>Vendor Type</th>
                                <th>Credit Days</th>
                                <th  width="4px">Edit</th>
                                <th  width="4px">Delete</th>
                            </tr>
                        </thead>
                        <tbody id="VendorList"></tbody>

                    </table>
  

这是我的ajax调用搜索框正常工作,但当我从搜索框中删除文本时,它表没有再次填充数据   我不知道发生了什么   需要帮助!

    $.get("/Vendor/GetVendorList", null, DataBind);
    function DataBind(VendorList) {
        var setdata = $("#VendorList");
        for (var i = 0; i < VendorList.length; i++) {
            var Data = "<tr 'class='row" + VendorList[i].VendorID + "'>" +
                 "<td>" + VendorList[i].VendorCode + "</td>" +
                "<td>" + VendorList[i].VendorName + "</td>" +
                 "<td>" + VendorList[i].VendorType + "</td>" +
                  "<td>" + VendorList[i].CreditDays + "</td>" +
                 " <td>" + "<a href='/vendor/Addvendor/?VendorID=" + VendorList[i].VendorID + "'><span class='glyphicon glyphicon-pencil'></span></a>" + " </td>" +
                 " <td>" + "<a href='/vendor/deleterecord/?DeleteId=" + VendorList[i].VendorID + "' ><span class='glyphicon glyphicon-trash'></span></a>" + " </td>" +
            "</tr>";
            setdata.append(Data);
            $("#example1").DataTable();
        }
    }

</script>

这是我的控制器

 public JsonResult GetVendorList()
    {
        List<VendorViewModel> ven = ObjModel.Vendors.Select(x => new VendorViewModel
        {
            VendorID = x.VendorID,
            VendorName = x.VendorName,
            VendorType = x.VendorType,
            VendorCode = x.VendorCode,
            VendorEmail = x.VendorEmail,
            VendorPhoneNo = x.VendorPhoneNo,
            VendorMobileNo = x.VendorMobileNo,
            VendorAddress = x.VendorAddress,
            CreditDays = x.CreditDays,
            IsActive = x.IsActive,
            Website = x.Website,
            IsDelete = x.IsDelete,
            UserID = x.UserID,
            ComapnyId = x.ComapnyId
        }).ToList();
        return Json(ven, JsonRequestBehavior.AllowGet);
    }

这是我的JSON方法,其中数据来自

1 个答案:

答案 0 :(得分:0)

首先清除所有表格行。你每次都在追求。

$('#example1 tbody').empty();

此外,您不需要在每次循环时将表指定为DataTable。

$.get("/Vendor/GetVendorList", null, DataBind);
    function DataBind(VendorList) {
        $('#example1 tbody').empty();
        var setdata = $("#VendorList");
        for (var i = 0; i < VendorList.length; i++) {
            var Data = "<tr 'class='row" + VendorList[i].VendorID + "'>" +
                 "<td>" + VendorList[i].VendorCode + "</td>" +
                "<td>" + VendorList[i].VendorName + "</td>" +
                 "<td>" + VendorList[i].VendorType + "</td>" +
                  "<td>" + VendorList[i].CreditDays + "</td>" +
                 " <td>" + "<a href='/vendor/Addvendor/?VendorID=" + VendorList[i].VendorID + "'><span class='glyphicon glyphicon-pencil'></span></a>" + " </td>" +
                 " <td>" + "<a href='/vendor/deleterecord/?DeleteId=" + VendorList[i].VendorID + "' ><span class='glyphicon glyphicon-trash'></span></a>" + " </td>" +
            "</tr>";
            setdata.append(Data);
        }
        $("#example1").DataTable();
    }