how to add a href route with parameter in datatable - javascript

here is i have a datatable based table i have fetched a data from database and displayed using datatable but in this datatable i went to redirect to show for each row of datatable so how to add a route for show with parameter 1d for each row thanks and waiting a positive response!
here is my code
<script>
$(function() {
$("#start_date").datepicker({
"dateFormat": "yy-mm-dd"
});
$("#end_date").datepicker({
"dateFormat": "yy-mm-dd"
});
});
// Fetch records
function fetch(start_date, end_date,zone_id,status_id,sector_id) {
$.ajax({
url: "{{ route('ProjectFilterdate/records') }}",
type: "GEt",
data: {
start_date: start_date,
end_date: end_date,
zone_id:zone_id,
status_id:status_id,
sector_id:sector_id
},
dataType: "json",
success: function(data) {
// Datatables
var i = 1;
$('#records').DataTable({
"data": data.ptojects,
// buttons
"dom": "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
"buttons": [
'copy','excel', 'pdf', 'print'
],
// responsive
"responsive": true,
"columns": [{
"data": "id",
"render": function(data, type, row, meta) {
return i++;
}
},
{
"data": "code"
},
{
"data": "name"
},
{
"data": "proposal_date"
},
{
"data": "proposal_value"
},
{
"data": "contractor"
},
{
"data": "subcontractor"
},
{
render: function ( data, type, row) {
return 'test';
}
},
]
});
}
});
}
i am trying to make an a href route but i don't know how to add an id parameter
here is the link i am trying
{
render: function ( data, type, row) {
return 'test';
}
the place of 1 must be replaced by id for each row

This is how i did t :
return DataTables::of($data)->addIndexColumn()
->addColumn('project', function ($test) {
return $test->project->title;
})
->addColumn('action', function ($test) {
$result = $test->active ? 'btn-success' : 'btn-danger';
return '<a href="' . route('projectDetail', [
'id' => $test->id
]) . '">detail </a>
';
})
->rawColumns([
'action'
])
->make(true);
}

Related

How to get all ID's of all Checked data in all pages on Datatables

Hi i have my datatables with checkbox at the first column
i able to get the checked checkbox id but i cannot get all the data on the other page
i have this to render my datatables
var tableDelcar;
function LoadTableDelcar() {
tableDelcar = $('#tblDelcar').DataTable({
//dom: 'Brtip',
order: [[1, 'asc']],
buttons: [
'csv', 'excel', 'pdf', 'print'
],
pageLength: 10,
"ajax": {
async: false,
type: 'POST',
contentType: 'application/json',
url: 'MaintenancePage.aspx/getCarDelMaintable',
"dataSrc": "d",
dataType: 'json',
},
"columns": [
{
"d": null,
render: function (data, type, row, meta) {
return '<input type="checkbox" class="select" id="' + row.CAR_NO + '"></td>';
}, title: "Action"
},
{ "data": "CAR_NO", title: "Car No" },
{ "data": "FINDINGS", title: "FINDINGS" },
{ "data": "ActionOwner", title: "Action Owner" },
{ "data": "Auditor", title: "Status" },
{ "data": "COORDINATOR", title: "COORDINATOR" }
]
});
}
and this is my function on getting the ID's of the checked checkboxes
function DeleteCar() {
var IDs = $("#tblDelcar input:checkbox:checked").map(function () {
return $(this).attr("id");
}).get(); alert(IDs);
}
Make sure your DOM is loaded when you call your function in the other page.
you have error ?

datatable editor Unable to automatically determine field from source

Having some problems in getting the editor of datatable to start working. keep getting the error Unable to automatically determine field from source. In my particular case the table is already loaded in html and on edit have to send the edited field to the server. Using inline edit functionality of the editor. Code for the initialization of datatable and editor is as follows
var ajaxBase = {
dataType: "json",
contentType: "application/json; charset=utf-8",
processData: "false",
headers: { "X-CSRFToken": '{{ csrf_token }}' },
data: function ( d ) {
console.log(d)
return JSON.stringify(d)
}
};
var editor = new $.fn.dataTable.Editor( {
table: "#response",
fields: [
{
name: "shop-name",
data:"shop-name"
},
{
name: "title"
},
{
name: "price"
},
{
name: "details",
}
]
} );
$('#response').on( 'click', 'tbody td:not(:first-child, :nth-child(3), :nth-child(7), :nth-child(8))', function (e) {
editor.inline(this);
} );
var table = $('#response').DataTable( {
fixedHeader: true,
responsive:true,
columns: [
{ "name": "group" },
{ "name": "shop-name" },
{ "name": "Thumbnail" },
{ "name": "title" },
{ "name": "price" },
{ "name": "details" },
{ "name": "url" },
{ "name": "manage" }
],
columnDefs: [{
render: function (data, type, full, meta) {
if (data.length<100){
return "<div class='text-wrap width-200'>" + data +"</div>";
}
return "<div class='text-wrap width-200'><div>" + data.slice(0,100) + "<a style='cursor:pointer;font-weight:bold;' onclick='show(this)'>...Show More</a></div><div style='display:none;'>"+data+" <a style='cursor:pointer;font-weight:bold;' onclick='hide(this)'>Show Less</a></div></div>";
},
targets: [5]
},
{
render: function (data, type, full, meta) {
return "<div align='center' class='text-wrap width-20'>" + data+"</div>"
},
targets: [0,1,3,4]
},
{
render: function (data, type, full, meta) {
return "<div align='center'><a style='cursor:pointer;color:blue;' href='"+data+"'>Open</a></div>"
},
targets: [6]
},
{
render: function (data, type, full, meta) {
return "<div align='center'><img src='" + data+"' width='60px' height='60px'></img></div>"
},
targets: [2]
},
],
} );
1- Ensure that the fields in your "editor" are completely matching with the columns specified in $('#response').DataTable( ... )
2- Use data keyword instead of name while specifying the columns.
fields: [
{
name: "group",
data:"group"
},
{
name: "shop-name",
data:"shopname"
},
{
name: "Thumbnail",
data:"thumbnail"
},
{
name: "Title",
data:"title"
},
{
name: "Price",
data:"price"
},
{
name: "Details",
data:"details"
},
{
name: "URL",
data:"url"
},
{
name: "Manage",
data:"manage"
}
]
...
columns: [
{ data: "group" },
{ data: "shopname" },
{ data: "thumbnail" },
{ data: "title" },
{ data: "price" },
{ data: "details" },
{ data: "url" },
{ data: "manage" }
],

Render Process is Gone in Google Chrome While adding 100,000 rows to a DataTable

Im loading 100,000 rows of data from my php BackEnd using Ajax as follow:
First an ajax call get the number of rows , pages "chunks" and the total of records to load from a click event (I already try with 10K rows to 50K rows and everything works ok).
$('#btnObtenerData').on('click', (e) => {
$.ajax({
url: 'getData.php',
type: 'GET',
dataType: 'JSON',
data: {
"accion": "getConteo"
}
}).done((response) => {
totalPaginas = response.totalPaginas,
totalFilas = response.totalFilas;
console.log(totalPaginas, totalFilas);
if (totalPaginas > 0) {
cargarPaginas(totalFilas, totalPaginas);
}
})
});
Once the first call is done cargarPaginas is executed, this function contains the followed code.
function cargarPaginas(totalFilas, totalPaginas) {
//paginar(1,totalFilas,totalPaginas);
let arr = [];
let pages = totalPaginas;
for (var i = 0; i < totalPaginas; i++) {
console.log(totalPaginas);
arr.push({
page: i + 1,
rows: totalFilas,
pages: pages
});
}
var p = $.when();
arr.forEach(function(item, key) {
p = p.then(function() {
return paginar(item.page, item.rows, item.pages);
});
});
}
And getPagina y paginar run the followed code as well
function getPagina(numeroPagina) {
let pagina = $("#paginacion").find('a.activa');
$("#tbodyReporte").find("[data-pagina='" + numeroPagina + "']").css("display", "");
$("#tbodyReporte").children("tr[data-pagina!='" + numeroPagina + "']").css("display", "none");
$(pagina).trigger('click');
}
function paginar(paginaNumero = 1, totalFilas = 1000, totalPaginas = 0) {
return $.ajax({
url: 'getData.php',
type: 'GET',
dataType: 'JSON',
data: {
accion: "getData",
"numeroPagina": paginaNumero,
"numeroFilas": totalFilas
}
}).done((response) => {
console.log(response);
if (paginaNumero == 1) {
tabla = $('#gridReporte').DataTable({
data: response,
columns: [{
"data": "Factura"
},
{
"data": "Tipo de Servicio"
},
{
"data": "SERVICIO"
},
{
"data": "fecha de emision"
},
{
"data": "NContrato"
},
{
"data": "CLIENTE"
},
{
"data": "Tipo Pago"
},
{
"data": "CIUDAD"
},
{
"data": "COLONIA"
},
{
"data": "Oficial de Recuperacion"
},
{
"data": "MONEDA"
},
{
"data": "MORA"
},
{
"data": "Cargo por Servicio"
},
{
"data": "ISV"
},
{
"data": "Total Factura"
},
{
"data": "N Cliente"
},
{
"data": "Dia Mora"
},
{
"data": "NUMRECIBO"
},
{
"data": "Agente Mant Cartera"
},
{
"data": "Nombre Vendedor"
},
{
"data": "Clase Cliente"
},
{
"data": "Tipo Vendedor"
}
],
dom: 'Bfrtip',
buttons: [
'excelHtml5'
],
"language": idioma_spanol,
"pageLength": 500,
"columnDefs": [{
"targets": '_all',
"createdCell": function(td, cellData, rowData, row, col) {
$(td).css('padding', '1px');
$(td).css('margin', '0px');
}
}]
});
} else {
tabla.rows.add(response)
.draw();
}
})
}
Like I said when a load of 50K records or less is made everything goes well
But when I try to load more than 90K records the Browser Tab crash like this:
I would like to understand why is this happening? and How to fix it.
Thanks in advice

Passing row data from DataTables to method in controller with parameter row data

I have a link in my datatable that will call a method in my controller and pass the row data as my parameter. but the value showing is [Object] [object] how should i pass it on my controller method as a list or dictionary?
I already tried to stringtify but it has an error showing that the query string is too long.
$.ajax({
url: urlGetRequest,
cache: false,
type: "POST",
success: function (resultdata) {
data = resultdata.aaData;
if ($.fn.DataTable.isDataTable('#tblSolutioning')) {
$('#tblSolutioning').DataTable().destroy();
}
$("#tblSolutioning").DataTable({
"bProcessing": true,
"aaData": data,
"columns": [
{
"mData": "RequestID",
"bSearchable": true,
"bSortable": true,
"mRender": function (data, type, row, meta) {
//return '' + data + '';
return "<a href='ManageSolution?rowRequest= " + rowData + " ' onclick='setBackUrl(window.location.href)'>" + data + "</a>";
}
},
],
"columnDefs": [{
"targets": '_all',
"searchable": true
}]
});
}
});
public ActionResult ManageSolution(Dictionary<string,string> rowRequest)
{
}

dataTables Change Data for ajax call

I'm using the following function to load a DataTables table with data from the server. I would like to reload the table with different parameters on a click event only i cant work out how to do this. If i call reload it just reloads with the original parameters if i reinitialise the whole table it throws an error as the table already exists.
I have been looking into fnServerParams but cant work out if it would help or not.
If anyone can point me in the correct direction that would be great.
function LoadRiskProfileModalTable(userId, teamId, riskProfileClass) {
var params = {
userId: userId,
teamId: teamId,
riskProfileClass: riskProfileClass
};
var data = JSON.stringify(params);
//if (!$.fn.DataTable.isDataTable("#riskProfileTable")) {
var table = $("#riskProfileTable").DataTable({
"bProcessing": true,
"sAjaxSource": "WFMHome.aspx/GetRiskProfileDrillThroughDatatable",
"fnServerData": function (sSource, aoData, fnCallback) {
//aoData.push(JSON.stringify(params));
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": data,
"success": function (msg) {
var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$("#riskProfileTable").show("fast", function () { $('#riskProfileTableLoading').hide("fast") });
},
error: function (xhr, textStatus, error) {
if (typeof console == "object") {
appendAlert("errorAlertPlaceholder", xhr.responseText, 1, "danger");
console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
}
}
});
},
"columns": [
{ "data": "CaseHandler" },
{ "data": "caseAreaText" },
{ "data": "RiskProfileText" },
{ "data": "PassChecks" },
{ "data": "F1Checks" },
{ "data": "F2Checks" },
{ "data": "F3Checks" },
{ "data": "CurrentChecks" }
]
});
//}
//else {
// $('#riskProfileTable').DataTable().ajax.reload();
// }
};
If you just want to replace the data you have now by the data coming from the server, try to replace the success method by:
"success": function (msg) {
var json = jQuery.parseJSON(msg.d); //I assume it's the data set
var table = $("#riskProfileTable").DataTable();
table.rows.clear(); //clear the current data
table.rows.add(json).draw();
$("#riskProfileTable").show("fast", function () { $('#riskProfileTableLoading').hide("fast") });
},

Categories