How to initialize DT to be the equivalent of a Swiss Army Knife.

stephen

Hello,

I like to set up my grid with the following requirements:

+ Download ALL data in one shot asynchronously and prevent the byproduct of the table being init'd
+ Be able to refresh the grid and initiate more calls via ajax
+ Disable paging so that it is one long list that scrolls
+ Filter and sort on the client side
+ Multi-select check boxes
+ Row re-ordering , automatic scrolling during drag and drop, and a nice drop target shadow that shows the exact position of proposed drop
+ Drag and Drop multiple rows to some other container NOT another grid

I'm sure I'm missing a few, but for now this is the minimum.

Thank you,
Stephen

allan

+ Download ALL data in one shot asynchronously and prevent the byproduct of the table being init'd
Use sAjaxSource - demo: http://datatables.net/release-datatables/examples/data_sources/ajax.html

+ Be able to refresh the grid and initiate more calls via ajax
Use the fnReloadAjax plugin: http://datatables.net/plug-ins/api#fnReloadAjax

+ Disable paging so that it is one long list that scrolls
Use bPaginate to control this feature

+ Filter and sort on the client side
Does that by default

+ Multi-select check boxes
I don't understand this one. What is a multi-select check box, and what does it control?

+ Row re-ordering , automatic scrolling during drag and drop, and a nice drop target shadow that shows the exact position of proposed drop
There currently isn't a plug-in for DataTables that does that, but it is perfectly possible to do. You would more or less do it in exactly the same way as you would without DataTables.

+ Drag and Drop multiple rows to some other container NOT another grid
Again, there isn't a plug-in for DataTables to do this, but you would do it exactly the same way as if you weren't using DataTables.

Allan

stephen

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

Yup that is entirely possible - again you would basically do it in exactly the same way as you would when not using DataTables. Do note thought that you will have to use fnGetNodes or the $ to get all TR elements in a table.

Allan

stephen

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)

stephen

Switched to FireFox and Firebug...problem solved. :)

stephen

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

}

allan

> How do you pass a param or object to the server.

http://datatables.net/ref#fnServerParams
http://datatables.net/release-datatables/examples/server_side/custom_vars.html

:-)

Allan

stephen

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" }
]
});

stephen

fixed...

http://www.datatables.net/forums/discussion/6704/fnserverparams-undefinedundefined-sent/p1

allan

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:

[code]
aoData.push( { "name": "id", "value": "0100" } );
[/code]

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

Allan

stephen

Hello,

Shouldn't fnServerParams be called again if using fn.dataTableExt.oApi.fnReloadAjax?

Thank you,

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

stephen

Perfect!, Thank you Allan