We Keep Coding

how to add a href route with parameter in datatable

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);
}

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 ?

How to bind JSON data from ajax call to DataSource of pivot table webdatarocks

Here the data is not binding in the following code:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
dataSource: {
dataSourceType: "json",
data: getData()
},
"slice": {
"rows": [
{
"uniqueName": "RLI_RAV_GRP_DES"
}
],
"columns": [
{
"uniqueName": "LEVEL1"
},
{
"uniqueName": "LEVEL2"
}
],
"measures": [
{
"uniqueName": "Q1",
"aggregation": "sum"
},
{
"uniqueName": "Q2",
"aggregation": "sum"
},
{
"uniqueName": "Q3",
"aggregation": "sum"
},
{
"uniqueName": "Q4",
"aggregation": "sum"
}
]
},
options:
{
grid: {
title: "Sales Report"
}
}
}
});
function getData() {
$.ajax({
type: "GET",
url: "NACGSample.aspx/GetPivotReportList",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (msg) {
return JSON.parse(msg.d);
//return msg.d;
},
error: function (msg) { return alert(msg); }
});
}

The issue is that you can not return a value from an asynchronous call (AJAX request).
The solution is to call a function inside your success: callback that passes the data when it is available.
Please check the following CodePen: https://codepen.io/webdatarocks/pen/eYErgGL?editors=1010

Issue with Datatable and JSON calculation

I am using datatable, loading data from ajax and preforming operation with javacript.
var table = $('#example').DataTable({
"ajax": {
"url": apiurl,
"type": 'GET',
"datatype": 'json'
},
// data: dataSet,
columns: [
{ title: "Item Key", data: "itemKey" },
{ title: "Description", data: "description" },
{ title: "Pounds", data: "pound" },
{
title: "Current Cost", data: function (data, type, row) {
return '<input type="number" class ="price-input" value="' + data.cost + '" style="background-color:lightgoldenrodyellow;">';
}
},
{ title: "Current Cost", data: "cost" },
{ title: "Unit", data: "unit" },
{
title: "Quantity", data: "quantity"
},
{
title: "Total", data: function (data, type, row) {
return data.cost * data.quantity;
}
},
{
title: "New Total", "data": "total",
"render": function (data, type, row) {
return "$" + data;
}
}
],
});
function calcTotal(q, p) {
var t = 0.00;
t = parseInt(q) * parseFloat(p);
return t.toFixed(2);
}
var table = $('#example').DataTable();
$.each(table, function (i, r) {
r.total = calcTotal(r.qty, r.price);
});
$("#example").on("change", ".price-input", function (event) {
var row = $(this).closest("tr");
var qty = table.cell($("td", row).eq(6)).data();
var price = $(this).val();
var total = table.cell($("td", row).eq(8).get(0));
total.data(calcTotal(qty, price)).draw();
});
'''
My problem is in the last column, when the datatable loads, value appear as undefined, when I change the value in textbox I am getting the right result and number How Can I able to see right number when Datatable loads? Please guide me

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