Hi ahsan.ali,
Here i have created sample that full-fill your requirement.
HTML
<div>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>
Customer ID
</th>
<th>
Name
</th>
<th>
Title
</th>
<th>
City
</th>
<th>
Details
</th>
</tr>
</thead>
<tfoot>
</tfoot>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
var table = $('#example').DataTable
({
"ajax": { "url": "jsonArray.txt" },
"responsive": true,
"sPaginationType": "full_numbers",
"columnDefs": [{ "targets": -1, "data": null, "defaultContent": "<input id='btnDetails' class='btn btn-success' width='25px' value='Get Details' />"}]
});
$('#example tbody').on('click', '[id*=btnDetails]', function () {
var data = table.row($(this).parents('tr')).data();
var customerID = data[0];
var name = data[1];
var title = data[2];
var city = data[3];
alert("Customer ID : " + customerID + "\n" + "Name : " + name + "\n" + "Title : " + title + "\n" + "City : " + city);
});
});
</script>
jsonArray.txt
{
"data":
[
["AAFKM","Mudassar Khan","Owner","Warszawa"],
["ALFKI","Maria ","Sales Representative","Boise"],
["ANATR","Ana Trujillo ","Owner","México D.F."],
["ANTON","Antonio Moreno ","Owner","Montréal"],
["AROUT","Thomas Hardy ","Sales Representative","Mannheim"],
["BERGS","Christina Berglund ","Order Administrator","Luleå"],
["BLAUS","Hanna Moos ","Sales Representative","Mannheim"],
["BLONP","Frédérique Citeaux ","Marketing Manager","Strasbourg"],
["BOLID","Martín Sommer ","Owner","Madrid"],
["BONAP","Laurence Lebihan ","Owner","Marseille"],
["BOTTM","Elizabeth Lincoln","Accounting Manager","Tsawassen"],
["BSBEV","Victoria Ashworth","Sales Representative","London"],
["CACTU","Patricio Simpson","Sales Agent","Buenos Aires"],
["CENTC","Francisco Chang","Marketing Manager","México D.F."],
["CHOPS","Yang Wang","Owner","Bern"],
["COMMI","Pedro Afonso","Sales Associate","Sao Paulo"],
["CONSH","Elizabeth Brown","Sales Representative","London"],
["DRACD","Sven Ottlieb","Order Administrator","Aachen"],
["DUMON","Janine Labrune","Owner","Nantes"],
["EASTC","Ann Devon","Sales Agent","London"],
["ERNSH","Roland Mendel","Sales Manager","Graz"],
["FAMIA","Aria Cruz","Marketing Assistant","Sao Paulo"],
["FISSA","Diego Roel","Accounting Manager","Madrid"],
["FOLIG","Martine Rancé","Assistant Sales Agent","Lille"],
["FOLKO","Maria Larsson","Owner","Bräcke"],
["FRANK","Peter Franken","Marketing Manager","München"],
["FRANR","Carine Schmitt","Marketing Manager","Nantes"],
["FRANS","Paolo Accorti","Sales Representative","Torino"],
["FURIB","Lino Rodriguez","Sales Manager","Lisboa"],
["GALED","Eduardo Saavedra","Marketing Manager","Barcelona"],
["GODOS","José Pedro Freyre","Sales Manager","Sevilla"],
["GOURL","André Fonseca","Sales Associate","Campinas"],
["GREAL","Howard Snyder","Marketing Manager","Eugene"],
["GROSR","Manuel Pereira","Owner","Caracas"],
["HANAR","Mario Pontes","Accounting Manager","Rio de Janeiro"]
]
}
Screenshot