将ajax数据绑定到Bootgrid不显示结果

Question

我遇到了搜索功能的问题。我正在搜索数据，而键入任何值& debug都会在下面的行上给我错误：

​

if (column.searchable && column.visible &&
                    column.converter.to(row[column.id]).search(searchPattern) > -1)

我的实现：

​

​

$(document).ready(function()
{
sendRESTQuery(asmx());
});
function asmx() { 
var url = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl;  
    var asmx =  url + "/_vti_bin/listdata.svc/AD?$select=Column1,Column2,Column5,Column7,Column9";   //?$select=Column1,Column2,Column3,Column4
   
    return asmx;
}
function testBtn() {
sendRESTQuery(asmx());
}
var baseUrl = asmx();

function sendRESTQuery(baseUrl) { 
   
    $.ajax({        
        contentType: 'application/json;odata=verbose',       
        url: baseUrl,
         headers: { 
            'X-RequestDigest': $('#__REQUESTDIGEST').val(), 
            "Accept": "application/json; odata=verbose" 
        }, 
        post: function () {alert('true')},       
        complete: function (result) {                
            var response = JSON.parse(result.responseText); 
            if (response.error) {
            } 
            else { 
               bgDetails = response.d; 
                onSuccess(bgDetails.results);                 
            } 
        }         
 
    });       
}

function onSuccess(bgDetails) {
		
      $("#grid-data").bootgrid().bootgrid("append", bgDetails);  
      $("#grid-data").bootgrid("sort", { Column2 : "asc"}).bootgrid("search", $('.search-field').val());

      
      }

​

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.js"></script>

​

<table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-keep-selection="true">
<thead>
<tr>
<th data-column-id="Column1" data-type="numeric" data-identifier="true" data-visible="false" >Employee ID</th>
<th data-column-id="Column2">Full Name</th>
<th data-column-id="Column5">Department</th>
<th data-column-id="Column7" >Work Phone</th>
<th data-column-id="Column9">Email</th>
</tr>
</thead>
</table>

Answer 1

当您使用包含可搜索列的null值的json使用append时，这是bootgrid中的一个已知错误。

您必须确保在可搜索列的任何行中都没有空值。其中一种方法是：

function onSuccess(bgDetails) {

    // iterate every row, and every property with null, and set an empty string...
    for (var i = 0; i < array.length; i++) {
        var row = array[i];
        for (var prop in row) {
            if (row.hasOwnProperty(prop) && row[prop] === null) {
                row[prop] = "";
            }
        }
    }

    $("#grid-data").bootgrid().bootgrid("append", bgDetails);  
    $("#grid-data").bootgrid("sort", { Column2 : "asc"}).bootgrid("search", $('.search-field').val());

  }

另一种选择是使用他们的ajax，而不是使用append，如下所示：

$("#grid-data").bootgrid({
    ajax: true,
    ajaxSettings: {        
        contentType: 'application/json;odata=verbose',
        headers: { 
            'X-RequestDigest': $('#__REQUESTDIGEST').val(), 
            "Accept": "application/json; odata=verbose" 
        }
    },
    url: baseUrl
});


$("#grid-data").bootgrid("sort", { Column2 : "asc"})
               .bootgrid("search", $('.search-field').val());

...but您可能需要更改服务器api响应以适应他们期望的json，如下所示(请参见their examples中的)：

{
  "current": 1,
  "rowCount": 10,
  "rows": [
    {
      "id": 19,
      "sender": "123@test.de",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "123@test.de",
      "received": "2014-05-30T20:15:00"
    },
    ...
  ],
  "total": 1123
}