Rini Zaini Rini Zaini - 1 year ago 122
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.

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" : [ ';
while ($data=mssql_fetch_assoc($query))
if($i != 0)
$jsonResult .=',';
$jsonResult .=json_encode($data);

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

<!doctype html>
<title>Work Order</title>
<link rel="stylesheet" href="asset/media/css/bootstrap.min.css"/>
<link rel="stylesheet" href="asset/media/css/dataTables.bootstrap.css"/>
<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>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="provinsi">
<th>No WO</th>
<th>Not Good</th>

<!-- /.panel-body -->
<!-- /.panel -->
<!-- /.col-lg-12 -->

<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>
$(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>' },
} );
} );

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download