DataTables

Thanks Allan.

Looks like it's time to put a demo together.

The first column of the header row, and all data rows would have a check box; for selecting all rows if you checked off the header or individual rows if you checked them off individually.

Allan,

When running the beta 2 in Visual Studio (IIS Express) I keep getting an exception from the following line which is writing to an unknown console object

Line 95 console!==k&&console.log&&console.log(a)

Hello,

Must seem like a simple request , but I can't figure it out. How do you pass a param or object to the server. I've based the call on this

http://datatables.net/release-datatables/examples/server_side/jsonp.html


oFDTable = $('#foodDescriptions').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"asStripClasses": null,
"sScrollY": "400",
"sScrollX": "400",
"bScrollCollapse": false,
"bJQueryUI": true,
"bProcessing": true,
"sAjaxSource": "http://localhost:22892/FoodDescriptions/GetByFG.jsonp?callback=?",
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
});
},
"bDeferRender": true,
"bStateSave": true,
"aoColumns": [
{ "sName": "NDB_No", "sTitle": "Id" },
{ "sName": "FdGrp_Cd", "sTitle": "FoodGroupId" },
{ "sName": "Long_Desc", "sTitle": "Long Desription" },
{ "sName": "Shrt_Desc", "sTitle": "Short Desription" },
{ "sName": "ComName" },
{ "sName": "ManufacName" },
{ "sName": "Survey" },
{ "sName": "Ref_Desc" },
{ "sName": "Refuse" },
{ "sName": "SciName" },
{ "sName": "N_Factor" },
{ "sName": "Pro_Factor" },
{ "sName": "Fat_Factor" },
{ "sName": "CHO_Factor" }
]
});


[WebGet(UriTemplate = "GetByFG{ext}")]
public HttpResponseMessage<jQueryDataTableParamModel> GetByFG()
{
var id = HttpContext.Current.Request.Params["id"];

try
{
using (var db = new Data.RDA.Model.RDA23Entities())
{
var q = (from fd in db.FOOD_DES
where(fd.FdGrp_Cd == id )
select new FoodDescription
{
Id = fd.NDB_No,
FdGrp_Cd = fd.FdGrp_Cd,
LongDesciption = fd.Long_Desc,
ShortDesciption = fd.Shrt_Desc

}).ToArray();

if (q == null)
{
var notFoundResponse = new HttpResponseMessage() { StatusCode = HttpStatusCode.NotFound, Content = new StringContent("Items not found") };
throw new HttpResponseException(notFoundResponse);
}

var result = (from fd in q
select new string[]
{
fd.Id,
fd.FdGrp_Cd,
fd.LongDesciption,
fd.ShortDesciption
}).ToArray();

var item = new jQueryDataTableParamModel
{
sEcho = "1",
iTotalRecords = result.Count(),
iTotalDisplayRecords = result.Count(),
aaData = result
};

var response = new HttpResponseMessage<jQueryDataTableParamModel>(item);

// set it to expire in 5 minutes
response.Content.Headers.Expires = new DateTimeOffset(DateTime.Now.AddSeconds(300));
return response;
}
}
catch (Exception ex)
{
var errorResponse = new HttpResponseMessage() { StatusCode = HttpStatusCode.NotFound, Content = new StringContent(ex.ToString()) };
throw new HttpResponseException(errorResponse);
}

}

I had that code in there at one time, although a bit different (I think) . It was producing and undifined=undefine in the query string..

This code does the same thing, undefined=undefined in the query string.


Edit from fiddler:

GET /FoodDescriptions/GetByFG.jsonp?callback=jQuery1710595415974163658_1327939843215&undefined=undefined&_=1327939843624 HTTP/1.1



oFDTable = $('#foodDescriptions').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"asStripClasses": null,
"sScrollY": "400",
"sScrollX": "400",
"bScrollCollapse": false,
"bJQueryUI": true,
"bProcessing": true,
"sAjaxSource": "http://spaten-pc:22892/FoodDescriptions/GetByFG.jsonp?callback=?",
"fnServerParams": function ( aoData ) {
aoData.push( { "id": "0100" } );
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"url": sSource,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
});
},
"bDeferRender": true,
"bStateSave": true,
"aoColumns": [
{ "sName": "NDB_No", "sTitle": "Id" },
{ "sName": "FdGrp_Cd", "sTitle": "FoodGroupId" },
{ "sName": "Long_Desc", "sTitle": "Long Desription" },
{ "sName": "Shrt_Desc", "sTitle": "Short Desription" },
{ "sName": "ComName" },
{ "sName": "ManufacName" },
{ "sName": "Survey" },
{ "sName": "Ref_Desc" },
{ "sName": "Refuse" },
{ "sName": "SciName" },
{ "sName": "N_Factor" },
{ "sName": "Pro_Factor" },
{ "sName": "Fat_Factor" },
{ "sName": "CHO_Factor" }
]
});

I see you've fixed it, but for anyone else, rather than doing:

aoData.push( { "id": "0100" } );

as the documentation shows you need to use name/value pairs:

aoData.push( { "name": "id", "value": "0100" } );

This is for compatibility with legacy jQuery, and legacy DataTables now.

Allan

It certainly could be yes. Where fnReloadAjax currently passes in an empty array it could call oApi._fnServerParams() - I've just updated the plug-in to do exactly that :-)

Allan