Develop Reference

How to make active particular toggle and the main thing is that all data is coming from backend

This is my toogle code .Iam getting this HTML from backend and we save it in table then render on html page.When I click on a switch and make activate ,all switches become active and my expectation is only that switch become active that is clicked
My controller data is
$scope.dtInstance = $('#all_driver_datatable').dataTable({
"bProcessing": true,
"bServerSide": true,
"order": [[0, "desc"]],
"iDisplayLength": 25,
"bDestroy": true,
"bSearchable": true,
"bPagination": true,
"bPaginate": true,
"sDom": '<"top"f>rt<"bottom"ipl><"clear">',
language: {
paginate: {
next: '<i class="tf right-chevron"></i>',
previous: '<i class="tf left-chevron"></i>'
}
},
aoColumns: [
{"sTitle": "{{'more.agents.AGENTS_ID' |
translate}}", "sClass": "ng-cloak", "sWidth": "7%"},
{
"sTitle": "{{'more.agents.IMAGE' |
translate}}",
"sClass": "ng-cloak",
"sWidth": "7%",
orderable: false
},
{"sTitle": "{{'more.agents.USERNAME' |
translate}}", "sClass": "ng-cloak", "sWidth": "10%"},
{"sTitle": "{{'more.agents.NAME' | translate}}",
"sClass": "ng-cloak", "sWidth": "10%"},
{"sTitle": "{{'more.agents.EMAIL' | translate}}",
"sClass": "ng-cloak", "sWidth": "9%"},
{"sTitle": "{{'more.agents.PHONE' | translate}}",
"sClass": "ng-cloak", "sWidth": "9%"},
{"sTitle": "{{'more.agents.DEVICE_TYPE' |
translate}}", "sClass": "ng-cloak", "sWidth": "6%"},
{
"sTitle": "{{'more.agents.DEVICE_VERSION' |
translate}}",
"sClass": "ng-cloak",
"sWidth": "6%"
},
{"sTitle": "{{'more.agents.TEAM' | translate}}",
"sClass": "ng-cloak", "sWidth": "9%"},
{"sTitle": "{{'more.agents.STATUS' | translate}}",
"sClass": "ng-cloak", "sWidth": "12%"},
{
"sTitle": "{{'more.agents.ACTIONS' |
translate}}",
"sClass": "ng-cloak",
orderable: false,
"sWidth": "14%"
},
],
// "columnDefs": [
// {targets: 'no-sort', orderable: false},
// {"type": "date-de", targets: 7}
// ],
"headerCallback": function (thead, data, start, end,
display) {
$compile(thead)($scope);
$('.dataTables_wrapper .dataTables_filter
input[type="search"]', '.fancy-table-
outer').attr('placeholder', 'Search
'+$scope.driverNamedAs).attr('onkeyup',
'showLoader()').focus().after('<div class="tf search">
</div>');
},
"sAjaxSource": api,
"createdRow": function (row, data, dataIndex) {
$compile(row)($scope);
$compile($('#all_driver_datatable thead tr')[0])
($scope);
hideLoader();
},
"fnDrawCallback": function() {
hideLoader();
},
"columnDefs": [ {
"targets": arr,
"visible": false
}
]
}).fnSetFilteringDelay(2000);
$timeout(function () {
$compile($('#all_driver_datatable thead tr')[0])
($scope);
$("#all_driver_datatable").show();
$('table th').css('opacity', '1');
console.log($scope.dtInstance);
hideLoader();
}, 2000);
}
And the HTML iam using is
,ain problem is that whnever i click on a single toggle ,it gives the value of particular but make all green
<td class="">
<label class="switch switch custom-switch" aria-hidden="false">
<input type="checkbox" ng-model="agent_approve[$index]" ng-
click="agent_status(agent_approve,id)" class="ng-pristine ng-
untouched ng-valid" aria-checked="true" aria-invalid="false">
<span></span>
</label>
</td>

jQuery dataTables - "sDom" is removing the css style from the datatable

I have used datatable to show my record and it is working fine as :
table = $(".jqueryDataTable").dataTable( {
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation in table.' );
this.fnHideEmptyColumns(this);
$('#lblReportHeader').html(reportHeader);
$('#lblFromDate').html(fromDateHeader);
$('#lblToDate').html(fromToHeader);
$('#tblReportHeader').show();
},
"bServerSide": true,
"bFilter": false,
"bRetrieve": true,
"bDestroy": true,
"sAjaxSource": "./getReportDetails",
"bJQueryUI": true,
"fnServerParams": function ( aoData ) {
newData=aoData;
newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
},
"aoColumns": [
{ "mData": "username", "sTitle": "username"},
{ "mData": "transferType", "sTitle": "transferType"},
{ "mData": "fromAccount", "sTitle": "fromAccount"},
{ "mData": "toAccount", "sTitle": "toAccount"},
{ "mData": "amount", "sTitle": "amount"},
{ "mData": "currency", "sTitle": "currency"},
{ "mData": "transferDate", "sTitle": "transferDate"},
{ "mData": "creditDebitFlag", "sTitle": "creditDebitFlag"},
{ "mData": "fromAccountType", "sTitle": "fromAccountType"},
{ "mData": "toAccountType", "sTitle": "toAccountType"},
{ "mData": "impsChannelType", "sTitle": "impsChannelType"},
{ "mData": "impsTranType", "sTitle": "impsTranType"},
{ "mData": "IFSCCode", "sTitle": "IFSCCode"},
{ "mData": "narration", "sTitle": "narration"},
{ "mData": "customerID", "sTitle": "customerID"},
{ "mData": "customerName", "sTitle": "customerName"},
{ "mData": "fromMMID", "sTitle": "fromMMID"},
{ "mData": "fromMobileNo", "sTitle": "fromMobileNo"},
{ "mData": "toMMID", "sTitle": "toMMID"},
{ "mData": "toMobileNo", "sTitle": "toMobileNo"},
{ "mData": "paymentType", "sTitle": "paymentType"},
{ "mData": "transReferenceId", "sTitle": "transReferenceId"},
{ "mData": "transactionStatus", "sTitle": "transactionStatus"}
]
} );
Then there was requirement to export the datatable into export so I took reference from : datatable export. So I added "sDom": 'T<"clear">lfrtip' in the code.
After adding "sDom" my css is not working.
Can anyone tell me what is the wrong in my code ?

Datatables initialization warning

I have a dropdown with multiple options that initializes a datatable using javascript. Everything works fine but the problem comes during execution in which when the option is selected second time i get an error , check out this fiddle,
DataTables warning (table id = 'defDiv'): Cannot reinitialise DataTable.
And Below is my code :
if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
"aaData":defenders,
"iDisplayLength":15,
"aoColumns": [
{ "mDataProp": "playerInfo" },
{ "mDataProp": "playerName" },
{ "mDataProp": "playerClub" },
{ "mDataProp": "playerValue" },
{ "mDataProp": "playerPoints" },
],
"order": [[ 3, "desc" ]],
});
}
Question is how can i prevent the warning from happening when the option is selected again ?

I've altered you code and it works now:
var goalkepeers = [{
"playerName": "Mignolet",
"playerClub": "Liverpool",
"playerValue": "5.0",
"playerPoints": "89",
}, {
"playerName": "de Gea",
"playerClub": "Manchester",
"playerValue": "6.7",
"playerPoints": "120",
}];
var defenders = [{
"playerName": "Ivanovic",
"playerClub": "Chelsea",
"playerValue": "7.8",
"playerPoints": "100",
}, {
"playerName": "Mertesacker",
"playerClub": "Arsenal",
"playerValue": "7.7",
"playerPoints": "110",
}];
var aoColumns = [{
"sTitle": "Name",
"mDataProp": "playerName"
},{
"sTitle": "Club",
"mDataProp": "playerClub"
},{
"sTitle": "Value",
"mDataProp": "playerValue"
},{
"sTitle": "Points",
"mDataProp": "playerPoints"
}];
var table = null;
$("#playersFilter").change(function () {
var value = $('#playersFilter').val();
if (value == "gk") {
if ($.fn.dataTable.isDataTable('#players')) {
$('#players').DataTable().destroy();
}
table = $('#players').DataTable({
"aaData": goalkepeers,
"iDisplayLength": 15,
"aoColumns": aoColumns,
"bRetrieve": true,
"order": [
[3, "desc"]
],
"bDestroy": true
});
} else if (value == "def") {
if ($.fn.dataTable.isDataTable('#players')) {
$('#players').DataTable().destroy();
}
table = $('#players').DataTable({
"aaData": defenders,
"iDisplayLength": 15,
"aoColumns": aoColumns,
"bRetrieve": true,
"order": [
[3, "desc"]
],
"bDestroy": true,
});
}
});
I'm pretty sure there's a more efficient way of doing it, I'll have a think and post a link to a JSFiddle as a comment.
You only really need the one table as well:
<select id="playersFilter">
<option>Choose Players</option>
<option value="gk">goalkepeers</option>
<option value="def">Defenders</option>
</select>
<table class="display" id="players"></table>

use this code
if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
"aaData":defenders,
"iDisplayLength":15,
"aoColumns": [
{ "mDataProp": "playerInfo" },
{ "mDataProp": "playerName" },
{ "mDataProp": "playerClub" },
{ "mDataProp": "playerValue" },
{ "mDataProp": "playerPoints" },
],
//EDITS
"bRetrieve":true,
"order": [[ 3, "desc" ]],
// use this in your code
"bDestroy": true,
});
}
this will work for me &
more details

Can you just destroy the table prior to re-initialization?
table.DataTable().destroy();
Something like this:
var table;
if ($.fn.dataTable.isDataTable('#defDiv')) {
table.DataTable().destroy();
}
table = $('#defDiv').DataTable({...
Documentation can be found here
Demo here

Bootstrap datepicker passing to c# ajax call

I am having difficulty passing a date to ajax call. The date is from a bootstrap datetimepicker. I do get the value javascript side by using:
var DateFrom = $("#dpDateFrom").data('datepicker').date;
I pass this date via ajax call from a datatable.
tblActivity = $('#tblActivity').dataTable({
"oLanguage": { "sEmptyTable": "No data to display" },
"bJQueryUI": false,
"bAutoWidth": false,
"sAjaxSource": '/api/activitylogapi/Activityt',
"aaData": mainJson.aaData,
"bProcessing": false,
"bServerSide": true,
"bSort": true,
"bFilter": false,
"bRetrieve": true,
"aoColumns": [
{ "sTitle": "Activity Type", "mDataProp": "Type", "sWidth": "10%" },
{ "sTitle": "Comments", "mDataProp": "Comments", "sWidth": "10%" },
{ "sTitle": "Company Name", "mDataProp": "CompanyName", "sWidth": "10%" },
{ "sTitle": "Contact", "mDataProp": "Contact", "sWidth": "10%" },
{ "sTitle": "User", "mDataProp": "UserFullName", "sClass": "truncate", "sWidth": "10%" },
{ "sTitle": "Created", "mDataProp": "DateS", "sClass": "text-right", "sWidth": "10%" },
],
"iDeferLoading": [mainJson.count, mainJson.count],
"aoColumnDefs": [{ "bSortable": false, "aTargets": [1,2,3,5] }],
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
aoData.push({ "name": "DateFrom", "value": DateFrom });
aoData.push({ "name": "DateTill", "value": DateTill });
doDataTablePostAjaxCalling(this, sSource, aoData, fnCallback, oSettings);
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
}
My ajax call is expecting a DateTimeOffset but can not get the date to pass through succesfully. Is there a way I must fomrat my javascript date

I resolved this by getting the value from datepicker with .val(). Then creating a date object in javascript then passing that to my controller.

Binding datatable with to JSON array from autocomplete

I am using an autocomplete field to get data from a server and display that in a datatable:
$("#firstname").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://myhost.com/webservices/test3.cfm",
data: request,
success: function (data) {
$('#results').dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bLengthChange": true,
"bFilter": true,
"bAutoWidth": false,
"bRetrieve" : true,
"aaData": data ,
"aoColumns": [
{ "sTitle": "Name", "sName": "name" },
{ "sTitle": "Title", "sName": "title" },
{ "sTitle": "Organization", "sName": "organization" },
{ "sTitle": "Email", "sName": "email" },
{ "sTitle": "Status", "sName": "status" }
]
});
}
});
}
The data return from the ajax call is:
[["Steven, Grek", "President", "Sands Corp.", "steven#yahoo.com", "1"],["Steven, Grek", "Associate", "Alliance Ltd.", "steven#yahoo.com", "1"],["Steven, Grek", "President", "Forest Products Association", "steven#yahoo.com", "1"]]
I get the following errors:
DataTables warning (table id = 'results'): Requested unknown parameter '1' from the data source for row 0
DataTables warning (table id = 'results'): Requested unknown parameter '1' from the data source for row 9
Showing 1 to 10 of 2,147 entries
If I replace "aaData": data
with the response from in the data:
"aaData": [["Steven, Grek", "President", "Sands Corp.", "steven#yahoo.com", "1"],["Steven, Grek", "Associate", "Alliance Ltd.", "steven#yahoo.com", "1"],["Steven, Grek", "President", "Forest Products Association", "steven#yahoo.com", "1"]]
it works.
Any idea what I am doing wrong?

Figured it out with the help of a co-worker:
The typeof data coming from my ajax call is a string.
$("#firstname").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://myhost.com/webservices/test3.cfm",
data: request,
success: function (data) {
var obj = jQuery.parseJSON(data); <---- typeof data is a string
$('#results').dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bLengthChange": true,
"bFilter": true,
"bAutoWidth": false,
"bRetrieve" : true,
"aaData": obj, <---- Use the parsed json object instead
"aoColumns": [
{ "sTitle": "Name", "sName": "name" },
{ "sTitle": "Title", "sName": "title" },
{ "sTitle": "Organization", "sName": "organization" },
{ "sTitle": "Email", "sName": "email" },
{ "sTitle": "Status", "sName": "status" }
]
});
}
});
},
});