We Keep Coding

Getting all selected rows with DataTables checkbox plugin with server side

I have this DataTable defenition:
var availableFilesTable = $("#availableFiles").DataTable({
'processing': true,
'serverSide': true,
'ajax': '#Url.Action("GetAllBinariesExclude", "Program", new {programId = Model.Id})',
'columns': [
{
data: 'Id',
'checkboxes': {
'selectRow': true
}
},
{
'data': 'BinaryName'
},
{ 'data': 'Sha1Hash' }
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
I want to get all the selected rows and submit them to server, I have the following code for form submit event:
$('form').submit(function(event) {
event.preventDefault();
var form = this;
var existingFileIds = selectedFilesTable.column(0).checkboxes.selected();
var fileIndex = 0;
var newFiles = availableFilesTable.column(0).checkboxes.selected();
$.each(newFiles,
function(index, fileId) {
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'SelectedBinaryFilesIds[' + fileIndex + ']')
.val(fileId)
);
fileIndex++;
});
if ($(form).valid()) {
form.submit();
}
});
The problem is that when I put a debugger and inspect the content of newFiles it only contains the content of active page of DataTable, Any hint on what am I doing wrong? I want to get all the selected rows in all pages with server side rendering but with the following code I only get the selected rows in the active page.
any help is much appreciated.

Why would blur event only fire one time? [duplicate]

I have a couple of drop downs that are populated from SharePoint using SPServices. This part works great. But then, I have a button that on click loads data from SharePoint and uses the dropdown texts as filter to fetch the data that will populate a table using the DataTables plugin. This part works only once; if I click the button again, nothing happens.
This is how I populate the dropdowns:
$(document).ready(function () {
var theYear; // Selected Year
var theRO; // Selected RO
//Fills the Dropdown lists (Year and RO)
$().SPServices({
operation: "GetListItems",
async: false,
listName: "{ListID}",
CAMLViewFields: "<ViewFields><FieldRef Name='Fiscal_x0020_Year' /><FieldRef Name='Regional_x0020_Office' /></ViewFields>",
completefunc: function (xData, Status) {
//Add Select Value option
$("#dropdown").prepend($('<option>', {
value: '',
text: 'Select Fiscal Year'
}));
$("#dropdownRO").prepend($('<option>', {
value: '',
text: 'Select Regional Office'
}));
//Fetching Data from SharePoint
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var dropDown = "<option value='" + $(this).attr("ows_Fiscal_x0020_Year") + "'>" + $(this).attr("ows_Fiscal_x0020_Year") + "</option>";
var dropDownRO = "<option value='" + $(this).attr("ows_Regional_x0020_Office") + "'>" + $(this).attr("ows_Regional_x0020_Office") + "</option>";
$("#dropdown").append(dropDown);
$("#dropdownRO").append(dropDownRO);
/////////////Deletes duplicates from dropdown list////////////////
var usedNames = {};
$("#dropdown > option, #dropdownRO > option").each(function () {
if (usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
////Deletes repeated rows from table
var seen = {};
$('#myTable tr, #tasksUL li, .dropdown-menu li').each(function () {
var txt = $(this).text();
if (seen[txt]) $(this).remove();
else seen[txt] = true;
});
});
} //end of completeFunc
}); //end of SPServices
$('.myButton').on('click', function () {
run()
});
}); //End jQuery Function
This is the function I need to run every time I click on "myButton" after changing my selection in the dropdowns:
function run() {
theYear = $('#dropdown option:selected').text(); // Selected Year
theRO = $('#dropdownRO option:selected').text(); // Selected RO
var call = $.ajax({
url: "https://blah-blah-blah/_api/web/lists/getByTitle('Consolidated%20LC%20Report')/items()?$filter=Fiscal_x0020_Year%20eq%20'" + theYear + "' and Regional_x0020_Office eq '" + theRO + "'&$orderby=Id&$select=Id,Title,Fiscal_x0020_Year,Notices_x0020_Received,Declined_x0020_Participation,Selected_x0020_Field_x0020_Revie,Selected_x0020_File_x0020_Review,Pending,Pending_x0020_Previous_x0020_Yea,Controversial,GFP_x0020_Reviews,NAD_x0020_Appeals,Mediation_x0020_Cases,Monthly_x0020_Cost_x0020_Savings,Monthly_x0020_Expenditure,Regional_x0020_Office,Month_Number", //Works, filters added
type: "GET",
cache: false,
dataType: "json",
headers: {
Accept: "application/json;odata=verbose",
}
}); //End of ajax function///
call.done(function (data, textStatus, jqXHR) {
var oTable = $('#example').dataTable({
"aLengthMenu": [
[25, 50, 100, 200, -1],
[25, 50, 100, 200, "All"]
],
"iDisplayLength": -1, //Number of rows by default. -1 means All Records
"sPaginationType": "full_numbers",
"aaData": data.d.results,
"bJQueryUI": false,
"bProcessing": true,
"aoColumns": [{
"mData": "Id",
"bVisible": false
}, //Invisible column
{
"mData": "Title"
}, {
"mData": "Notices_x0020_Received"
}, {
"mData": "Declined_x0020_Participation"
}, {
"mData": "Selected_x0020_Field_x0020_Revie"
}, {
"mData": "Selected_x0020_File_x0020_Review"
}, {
"mData": "Pending"
}, {
"mData": "Pending_x0020_Previous_x0020_Yea"
}, {
"mData": "Controversial"
}, {
"mData": "GFP_x0020_Reviews"
}, {
"mData": "NAD_x0020_Appeals"
}, {
"mData": "Mediation_x0020_Cases"
}, {
"mData": "Monthly_x0020_Cost_x0020_Savings",
"fnRender": function (obj, val) {
return accounting.formatMoney(val);
}
}, {
"mData": "Monthly_x0020_Expenditure",
"fnRender": function (obj, val) {
return accounting.formatMoney(val);
}
}],
"bDeferRender": true,
"bRetrieve": true,
"bInfo": true,
"bAutoWidth": true,
"bDestroy": true,
"sDom": 'T&;"clear"&;frtip',
"oTableTools": {
"aButtons": ["xls"],
"sSwfPath": "../../Style Library/js/datatables/TableTools/media/swf/copy_csv_xls_pdf.swf",
},
"sSearch": "Filter",
"fnDrawCallback": function () {
//Add totals row
var Columns = $("#example > tbody").find("> tr:first > td").length;
$('#example tr:last').after('<tr><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td><td class="total"></td></tr>');
//Formating the Total row number to no decimals
$("#example tr:last td:not(:first,:last)").text(function (i) {
var t = 0;
$(this).parent().prevAll().find("td:nth-child(" + (i + 2) + ")").each(function () {
t += parseFloat($(this).text().replace(/[\$,]/g, '') * 1);
});
return parseInt(t * 100, 10) / 100;
});
//Format the monthly expenditure and savings to currency formatFormating the currency
var cell = new Array();
cell[0] = $('#example tr:last td:nth-child(12)').text();
cell[1] = $('#example tr:last td:nth-child(13)').text();
$('#example tr:last').find('td:nth-child(12)').html(accounting.formatMoney(cell[0]));
$('#example tr:last').find('td:nth-child(13)').html(accounting.formatMoney(cell[1]));
$('#example tr:last').find('td:last').hide();
} //hides extra td that was showing
}); //End of Datatable()
}); //End of call.done function
$('#theTableDiv').slideDown();
} //end of run() function
I'm not a programmer, I'm just trying to learn. I would appreciate any help. Thanks in advance

I would guess that you are replacing the part of the page where the button lives. (you really need to format your code more neatly for SO... use JSFiddle.net and their TidyUp button).
If that is the case you need to use a delegated event handler:
$(document).on('click', '.myButton', function () {
run()
});
This listens at a static ancestor of the desired node, then runs the selector when the event occurs, then it applies the function to any matching elements that caused the event.
document is the fallback parent if you don't have a convenient ancestor. Do not use 'body' for delegated events as it has odd behaviour.

Datatables serverside info + static colum with 2 buttons

I'm struggeling to make a static column with 2 buttons that trigger 2 links with dynamic data. I managed to make 1 button work but i can't make the other. I tried adding an id to each one and call different functions for each one but it seems it's only working with $(\'#example tbody \') and not ($(\'#customID \').
Here is my js:
<script type="text/javascript">
$(document).ready(function() {
var table = $(\'#example\').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "app/server_processing.php",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Edit</button> <button>Delete</button>"
} ]
} );
$(\'#example tbody \').on( \'click\', \'button\', function () {
var data = table.row( $(this).parents(\'tr\') ).data();
window.location.href = "index.php?categ=edit&id="+ data[0];
} );
} );
</script>

I fixed it
<script type="text/javascript">
$(document).ready(function() {
var table = $(\'#example\').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "app/server_processing.php",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button id="edit">Edit</button> <button id="delete">Delete</button>"
} ]
} );
$(\'#example tbody \').on( \'click\', \'#edit\', function () {
var data = table.row( $(this).parents(\'tr\') ).data();
window.location.href = "index.php?categ=edit&id="+ data[0];
} );
$(\'#example tbody \').on( \'click\', \'#delete\', function () {
var data = table.row( $(this).parents(\'tr\') ).data();
window.location.href = "index.php?categ=delete&id="+ data[0];
} );
} );
</script>

add dynamic html table between two rows of jquery datatable using slideToggle button

- Here Sample code for table creation in JQuery.
`
var oTable = $('#tblData').dataTable( {
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": 125,
"aaData": [],
"aaSorting": [[ 0, 'desc' ]],
"asStripeClasses": [ 'strip1', 'strip1'],
"bAutoWidth": false,
"aoColumns": [
{ "sTitle": "", "sClass": "text-left" },
]
} );
`
- after response here my JS for add data.
function result(response)
{
var TempData = '<div id="DB_Data"> <table width="100%" border="1"><tr><td>Data</td><td>1stColomn</td></tr><tr><td></td><td></td></tr></table></div>'; //here for sample two rows with two colomns
var temp = "$('#DB_Data').slideToggle();"; // for call table
var ColButton = '<img class="" onClick="'+temp+'" src="../right.png" width="20px" />';
// for button creation
var arr =[];
$(response.Data).each(function(index, element) {
var t = ["",this.Date,this,time.....];
arr.push(t);
});
var oTable = $('#tblData').dataTable();
oTable.fnClearTable();
$('#tblData').dataTable().fnAddData(arr);
}
- here how to create/show table of DB_Data when click on 1st column of toggle button.
- save my days.what is wrong in my above code
- image is :
![enter image description here][1]
[1]: http://i.stack.imgur.com/LpWHN.jpg

How to render a column with jQuery dataTables

I am using jQuery dataTables to fetch data from the server.
here is my code:
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Device/AjaxHandler",
"bProcessing": true,
"aoColumns": [
{ "sName": "AccountCode" },
{ "sName": "User" },
{ "sName": "Signal Strength"
"render": renderSignal(data)
} ]
});
function renderSignal(val) {
return '<p>' + val + '</p>';
}
});
</script>
This doesn't work, but I have the feeling it is a syntax error.
Im not sure if render is the correct function name to use.
What I want to do, is take a value 1-3 and then display a different image for each value.
So I want to define that columns layout in my render function.