Привязка данных ajax к Bootgrid не показывает результат

Question

Я сталкиваюсь с проблемой функциональности поиска. Я ищу данные, и в то время как ввод любого значения и отладка дали мне ошибку в строке ниже:

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

Это известная ошибка в bootgrid при работе с append с JSON, содержащим null значения для столбца с возможностью поиска.

Вы должны убедиться, что у вас нет нулевых значений ни в одной из строк вашего столбца с возможностью поиска. Один из способов сделать это:

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());

... но вам может понадобиться изменить ответ API сервера, чтобы он соответствовал ожидаемому json, что-то вроде этого (см. их примеры):

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