How to initialize DT to be the equivalent of a Swiss Army Knife.
How to initialize DT to be the equivalent of a Swiss Army Knife.
stephen
Posts: 10Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
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
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)
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);
}
}
http://datatables.net/ref#fnServerParams
http://datatables.net/release-datatables/examples/server_side/custom_vars.html
:-)
Allan
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" }
]
});
http://www.datatables.net/forums/discussion/6704/fnserverparams-undefinedundefined-sent/p1
> 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
Shouldn't fnServerParams be called again if using fn.dataTableExt.oApi.fnReloadAjax?
Thank you,
Allan