Rini Zaini Rini Zaini - 6 months ago 44
Ajax Question

how to create link edit datatables and ajax.

I'm still a newbie with datatables and ajax. I want to ask is how to make the edit link on each row of data is displayed in datatables?
I wrote a query on page pc_list_barcode.php. daftar_barcode.php page to display the query results.



<?php
include "class/connect_sql.class.php";
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) )
{



$query = mssql_query("select TOP 30 barcode_wo_nmr, barcode_wo_line,wo_wks_desc,
barcode_wo_proses, barcode_npk, barcode_start, barcode_pending, barcode_end,barcode_qty,barcode_ng,barcode_reason_pending
from WO_ENG_BARCODE, WO_ENG_DET, WO_ENG_DET_WKS with(nolock) where
barcode_wo_nmr= WO_DET_NOMOR and barcode_line = wo_det_line and
barcode_wo_nmr = wo_wks_nmr and WO_DET_NOMOR = wo_wks_nmr and barcode_wo_line = wo_wks_line and WO_DET_NAMA_BARANG = wo_wks_barang and right(barcode_wo_nmr,2) = '15'
order by barcode_wo_nmr asc");
$jsonResult = '{"data" : [ ';
$i=0;
while ($data=mssql_fetch_assoc($query))
{
if($i != 0)
{
$jsonResult .=',';
}
$jsonResult .=json_encode($data);
$i++;
$data['barcode_wo_nmr'];
$data['wo_wks_desc'];
$data['barcode_wo_line'];
$data['barcode_wo_proses'];
$data['barcode_npk'];
$data['barcode_start'];
$data['barcode_pending'];
$data['barcode_end'];
$data['barcode_qty'];
$data['barcode_ng'];
$data['barcode_reason_pending'];

}
$jsonResult .= ']}';
echo $jsonResult;
}
else {
echo '<script>window.location="404.html"</script>';
}
?>

<!doctype html>
<html>
<head>
<title>Work Order</title>
<link rel="stylesheet" href="asset/media/css/bootstrap.min.css"/>
<link rel="stylesheet" href="asset/media/css/dataTables.bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">

<div class="btn-group pull-right">
<a href="#">Add</a>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="provinsi">
<thead>
<tr>
<th>No WO</th>
<th>Deskripsi</th>
<th>Line</th>
<th>Proses</th>
<th>NPK</th>
<th>Mulai</th>
<th>Pending</th>
<th>Selesai</th>
<th>QTY</th>
<th>Not Good</th>
<th>Reason</th>
<th>Action</th>


</tr>
</thead>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
</div>

<script src="asset/script/jquery-2.1.4.min.js"></script>
<script src="asset/bootstrap-3.3.6-dist/bootstrap.min.js"></script>
<script src="asset/media/js/jquery.dataTables.js"></script>
<script src="asset/media/js/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
var t = $('#provinsi').DataTable( {
"ajax": "pc_list_barcode.php",
"order": [[ 1, 'asc' ]],
"columns": [
{
"data": "barcode_wo_nmr",
"width": "120px",
"sClass": "text-center"
},
{ "data": "wo_wks_desc" },
{ "data": "barcode_wo_line" },
{ "data": "barcode_wo_proses" },
{ "data": "barcode_npk" },
{ "data": "barcode_start" },
{ "data": "barcode_pending" },
{ "data": "barcode_end" },
{ "data": "barcode_qty" },
{ "data": "barcode_ng" },
{ "data": "barcode_reason_pending" },
// {"data": return '<a href="edit_barcode.php?id=' + row.id + '">EDIT</a>' },
]
} );
} );
</script>
</body>
</html>




Answer

your data has 11 fields, your table head has 12 fields and your DataTable initialisation has 9 or 10 fields... If you want to return tweaked html into a row you'll need a render function, from your description it should probably look like this:

{
    "data": "unique_id",
    "render": function(data){
        return '<a href="edit_barcode.php?id=' + data + '">EDIT</a>' 
    }
}

I couldn't see where the row.id you referenced was being set in you PHPs JSON creation so I'm not sure where unique_id should be coming from. Basically you'll need to alter this for your use case but if you replace your commented out line with this it should help a little.

Hope that helps.