Я пытаюсь использовать серверную функциональность плагина Таблиц данных jQuery с ASP.NET. Запрос ajax возвращает допустимый JSON, но ничто не обнаруживается в таблице.
У меня первоначально были проблемы с данными, которые я отправлял в запросе ajax. Я получал "Недопустимую примитивную" ошибку JSON. Я обнаружил, что данные должны быть в строке вместо сериализированного JSON, как описано в этом сообщении: http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/. Я не был совершенно уверен, как зафиксировать это, таким образом, я пытался добавить это в запросе ajax:
"data": "{'sEcho': '" + aoData.sEcho + "'}"
Если aboves в конечном счете будет работать, то я добавлю другие параметры позже. Прямо сейчас я просто пытаюсь заставить что-то обнаруживаться в моей таблице.
Возврат JSON смотрит хорошо и проверяет, но sEcho в сообщении не определен, и я думаю вот почему, что никакие данные не загружаются в таблицу.
Так, что я делаю неправильно? Я даже на правильном пути, или я глуп? Кто-либо столкнулся с этим прежде, или имейте какие-либо предложения?
Вот мой jQuery:
$(document).ready(function()
{
$("#grid").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide":true,
"sAjaxSource": "GridTest.asmx/ServerSideTest",
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"type": "POST",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": sSource,
"data": "{'sEcho': '" + aoData.sEcho + "'}",
"success": fnCallback
});
}
});
});
HTML:
Last Name
First Name
UserID
Loading data from server
Webmethod:
_
Public Function ServerSideTest() As Data
Dim list As New List(Of String)
list.Add("testing")
list.Add("chad")
list.Add("testing")
Dim container As New List(Of List(Of String))
container.Add(list)
list = New List(Of String)
list.Add("testing2")
list.Add("chad")
list.Add("testing")
container.Add(list)
HttpContext.Current.Response.ContentType = "application/json"
Return New Data(HttpContext.Current.Request("sEcho"), 2, 2, container)
End Function
Public Class Data
Private _iTotalRecords As Integer
Private _iTotalDisplayRecords As Integer
Private _sEcho As Integer
Private _sColumns As String
Private _aaData As List(Of List(Of String))
Public Property sEcho() As Integer
Get
Return _sEcho
End Get
Set(ByVal value As Integer)
_sEcho = value
End Set
End Property
Public Property iTotalRecords() As Integer
Get
Return _iTotalRecords
End Get
Set(ByVal value As Integer)
_iTotalRecords = value
End Set
End Property
Public Property iTotalDisplayRecords() As Integer
Get
Return _iTotalDisplayRecords
End Get
Set(ByVal value As Integer)
_iTotalDisplayRecords = value
End Set
End Property
Public Property aaData() As List(Of List(Of String))
Get
Return _aaData
End Get
Set(ByVal value As List(Of List(Of String)))
_aaData = value
End Set
End Property
Public Sub New(ByVal sEcho As Integer, ByVal iTotalRecords As Integer, ByVal iTotalDisplayRecords As Integer, ByVal aaData As List(Of List(Of String)))
If sEcho <> 0 Then Me.sEcho = sEcho
Me.iTotalRecords = iTotalRecords
Me.iTotalDisplayRecords = iTotalDisplayRecords
Me.aaData = aaData
End Sub
Возвращенный JSON:
{"__type":"Data","sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["testing","chad","testing"],["testing2","chad","testing"]]}
Я изменил данные на
"data": "{'sEcho': '"+ aoData[0].value + "'}",
, и это сработало. Итак, теперь вопрос в том, как передать остальные данные веб-сервису. Я попытался использовать JSON2, чтобы превратить JSON в строку, но это открыло еще одну банку червей, и это отдельная проблема.
Я работал над тем же, и мой друг помог мне с этой частью. Этот код написан на C #, но вы сможете его перенести.
Код jQuery:
<script type="text/javascript">
$(document).ready(function() {
function renderTable(result) {
var dtData = [];
// Data tables requires all data to be stuffed into a generic jagged array, so loop through our
// typed object and create one.
$.each(result, function() {
dtData.push([
this.FirstName,
this.LastName,
this.Sign
]);
});
$('#grid').dataTable({
'aaData': dtData,
"bJQueryUI": true
});
}
// Make an AJAX call to the PageMethod in the codebehind
$.ajax({
url: '<%= Request.Url.AbsolutePath %>/ServerSideTest',
data: '{}',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(result) {
// Call the renderTable method that both fills the aaData array with data and initializes the DataTable.
renderTable(result.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + ": " + textStatus + ": " + errorThrown);
}
});
});
</script>
код aspx:
<table id="grid" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Sign</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
код позади:
// to serialize JSON in ASP.NET, it requires a class template.
[Serializable]
public class Data
{
// Yay for 3.5 auto properties
public string FirstName { get; set; }
public string LastName { get; set; }
public string Sign { get; set; }
};
[WebMethod]
public static List<Data> ServerSideTest()
{
List<Data> DataList = new List<Data>();
Data thisData = new Data();
thisData.FirstName = "Sol";
thisData.LastName = "Hawk";
thisData.Sign = "Aries";
DataList.Add(thisData);
Data thisData2 = new Data();
thisData2.FirstName = "Mako";
thisData2.LastName = "Shark";
thisData2.Sign = "Libra";
DataList.Add(thisData2);
return DataList;
}
Надеюсь, это поможет!
Следующий шаг для меня - заставить работать фильтрацию, разбиение по страницам и сортировку. Дайте мне знать, если эти детали у вас заработают =)