shift click checkboxes using server side?
shift click checkboxes using server side?
Hello,
I love using dataTables and thank you for your hard work! I've been using it more and more and look forward to using it to attack new challenges!
Speaking of: My latest challenge is trying to get some shift clicking javascript to work with server side processing.
It works with my datatable when using client side processing but not when I switch to server side JSON. There is probably a good reason but I'm still pretty new and not very learned when it comes to how server side calls work.
Below is my code and scripts I'm using.
[code]
$(document).ready(function () {
oTable = $('#Table').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Default_JSON.asp",
"bDestroy": true,
"bLengthChange": false,
"iDisplayLength": <%=AuthenticatedRowsPerPage %>,
"aoColumns": [null,null,null,null,null ],
"aoColumnDefs": [
{"bSortable": false, "aTargets": [ 0 ] },
{"bSortable": false, "aTargets": [ 3 ] }
],
fnServerParams: function ( aoData ) {
aoData.push( { "name" : "Selected_Platform_GUID", "value" : "<%=Selected_Platform_GUID %>" } );
}
});
//select all checkboxes
$('#selectall').click(function (i, v) {
$('.selectedId').prop('checked', this.checked);
});
var checkCount = $('.selectedId').length;
$('.selectedId').click(function (i, v) {
$('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
});
//shift-click checkboxes
var lastChecked = null;
var handleChecked = function (e) {
if (lastChecked && e.shiftKey) {
var i = $('input[type="checkbox"]').index(lastChecked);
var j = $('input[type="checkbox"]').index(e.target);
var checkboxes = [];
if (j > i) {
checkboxes = $('input[type="checkbox"]:gt(' + i + '):lt(' + (j - i) + ')');
} else {
checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
}
if (!$(e.target).is(':checked')) {
$(checkboxes).removeAttr('checked');
} else {
$(checkboxes).attr('checked', 'checked');
}
}
lastChecked = e.target;
}
$('input[type=checkbox]').click(handleChecked);
});
Rendering engine
Browser
Platform(s)
Engine version
[/code]
If I comment out bProcessing, bServerSide and sAjaxsource and put in a table of elements, I get shift clicking and select all to work.
Here is a JSFiddle of what I'm talking about. http://jsfiddle.net/vHUTG
What also confuses me is that select all is working when I switch to server-side but not shift-click. Is it because I'm calling select all on the html page?
Here's what I'm doing on my server-side Default_JSON page.
[code]
aaData = aaData & "[""" & """"
aaData = aaData + ", """ & rs("Engine") & """"
aaData = aaData + ", """ & rs("Browser") & """"
aaData = aaData + ", """ & rs("Platform") & """"
aaData = aaData + "],"
[/code]
This is in asp classic and constructed referencing, http://www.datatables.net/development/server-side/asp_classic
I would appreciate any help or guidance in what is going on. Thanks in advance!
I love using dataTables and thank you for your hard work! I've been using it more and more and look forward to using it to attack new challenges!
Speaking of: My latest challenge is trying to get some shift clicking javascript to work with server side processing.
It works with my datatable when using client side processing but not when I switch to server side JSON. There is probably a good reason but I'm still pretty new and not very learned when it comes to how server side calls work.
Below is my code and scripts I'm using.
[code]
$(document).ready(function () {
oTable = $('#Table').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Default_JSON.asp",
"bDestroy": true,
"bLengthChange": false,
"iDisplayLength": <%=AuthenticatedRowsPerPage %>,
"aoColumns": [null,null,null,null,null ],
"aoColumnDefs": [
{"bSortable": false, "aTargets": [ 0 ] },
{"bSortable": false, "aTargets": [ 3 ] }
],
fnServerParams: function ( aoData ) {
aoData.push( { "name" : "Selected_Platform_GUID", "value" : "<%=Selected_Platform_GUID %>" } );
}
});
//select all checkboxes
$('#selectall').click(function (i, v) {
$('.selectedId').prop('checked', this.checked);
});
var checkCount = $('.selectedId').length;
$('.selectedId').click(function (i, v) {
$('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
});
//shift-click checkboxes
var lastChecked = null;
var handleChecked = function (e) {
if (lastChecked && e.shiftKey) {
var i = $('input[type="checkbox"]').index(lastChecked);
var j = $('input[type="checkbox"]').index(e.target);
var checkboxes = [];
if (j > i) {
checkboxes = $('input[type="checkbox"]:gt(' + i + '):lt(' + (j - i) + ')');
} else {
checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
}
if (!$(e.target).is(':checked')) {
$(checkboxes).removeAttr('checked');
} else {
$(checkboxes).attr('checked', 'checked');
}
}
lastChecked = e.target;
}
$('input[type=checkbox]').click(handleChecked);
});
Rendering engine
Browser
Platform(s)
Engine version
[/code]
If I comment out bProcessing, bServerSide and sAjaxsource and put in a table of elements, I get shift clicking and select all to work.
Here is a JSFiddle of what I'm talking about. http://jsfiddle.net/vHUTG
What also confuses me is that select all is working when I switch to server-side but not shift-click. Is it because I'm calling select all on the html page?
Here's what I'm doing on my server-side Default_JSON page.
[code]
aaData = aaData & "[""" & """"
aaData = aaData + ", """ & rs("Engine") & """"
aaData = aaData + ", """ & rs("Browser") & """"
aaData = aaData + ", """ & rs("Platform") & """"
aaData = aaData + "],"
[/code]
This is in asp classic and constructed referencing, http://www.datatables.net/development/server-side/asp_classic
I would appreciate any help or guidance in what is going on. Thanks in advance!
This discussion has been closed.
Replies