I have a datatable that fetches records from database with ajax. I want to add the edit tooltip like jquery-datatables-editor extension to datatables but for free. Is there any plugin to do this? if not, can any one help me to do this manually?
This is my JavaScript code:
$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
$.ajax({
url: '/some url',
type: 'GET',
data: data,
success: function (data) {
console.log(data)
}
});
},
"columns": [{
"title": "edit",
"data": null,
"className": "center",
"defaultContent": ' Edit / Delete '
}, {
"title": "name",
"data": "name"
}, {
"title": "id",
"data": "id"
},
]
});
Since your question (and posted code sample) are mostly concerned with front-end part of editable rows feature I will focus on that primarily as backend logic is pretty much straightforward (update/insert data into storage upon AJAX-request receipt).
In order to implement that feature following logic I may suggest:
append (by means of createdRow option) some anchor (row().index() or source object id property, etc) to your source data within some <tr> attribute (e.g. rowindex), so you will know later on which entry to modify server-side:
$('table').DataTable({
...
createdRow: (tr, _, rowIndex) => $(tr).attr('rowindex', rowIndex)
})
append some anchor attribute (e.g. data-src) to your editor pop-up (I'll use bootstrap-4 modal for that purpose) <input> nodes to link those input fields to corresponding source object properties:
<div><label>PropertyX:</label><input data-src="propertyX"></input></div>
upon clicking edit button, grab corresponding row data, populate editor pop-up <input> fields with that data, pass anchor to edited row (rowindex attribute value) over to pop-up attribute:
//for table id 'example' handle clicking
//edit button having class 'edit'
$('#example').on('click', '.edit', function () {
//get clicked row invoking row() API method
//against DataTables object assigned to dataTable
const rowClicked = dataTable.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#editform input'), function () {
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
//set modal attribute rowindex to corresponding row index
$('#editform').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#editform').modal('toggle');
});
upon completing row data editing, store <input> values into object:
const modifiedData = {};
$.each($('#editform input'), function(){
Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});
});
POST data (along with corresponding rowindex) to the server and reload (ajax.reload()) up-to-date datatable upon success:
$.ajax({
url: '/editrow',
method: 'POST',
data: {id: $('#editform').attr('rowindex'), ...modifiedData},
success: () => {
$('#editform').modal('hide');
dataTable.ajax.reload();
}
});
Complete live demo of that method you might examine in your browser's DevTools by the following link with some bonus in form of row delete button.
Both HTML and jQuery code sample might look as follows (not executable as there's no supporting backend):
$(document).ready(() => {
//data table initialization
const dataTable = $('#example').DataTable({
ajax: {
url: '/getdata',
type: 'GET',
dataSrc: ''
},
dom: 't',
//use <tr> attribute 'rowindex' to anchor to source data row index
createdRow: (tr, _, rowIndex) => $(tr).attr('rowindex', rowIndex),
columns: [
{data: 'name', title: 'Name'},
//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
{data: 'title', title: 'Title', render: (cellData, _, __, meta) => cellData+'<i class="delete fa fa-trash"></i><i class="edit fa fa-pencil"></i></button>'}
],
});
//delete button handler
$('#example').on('click', '.delete', function() {
//extract the index of the row to delete
//from 'rowindex' attribute
const rowIndex = $(this)
.closest('tr')
.attr('rowindex');
//do AJAX-call to the backend
$.ajax({
url: '/deleterow',
method: 'DELETE',
data: {id: rowIndex},
//re-draw datatable with up to date data
success: () => dataTable.ajax.reload()
});
});
//edit button handler (open up edit form modal)
$('#example').on('click', '.edit', function(){
//get clicked row
const rowClicked = dataTable.row($(this).closest('tr'));
//populate edit form with row data by corresponding
//rowClicked property based on 'data-src' attribute
$.each($('#editform input'), function(){
$(this).val(rowClicked.data()[$(this).attr('data-src')]);
});
//set modal attribute rowindex to corresponding row index
$('#editform').attr('rowindex', rowClicked.index());
//open up edit form modal
$('#editform').modal('toggle');
});
//submit edits handler
$('#editform').on('click', '#submitedits', function(){
//grab modified data into object
const modifiedData = {};
$.each($('#editform input'), function(){
Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});
});
//send modified data to the backend
$.ajax({
url: '/editrow',
method: 'POST',
data: {id: $('#editform').attr('rowindex'), ...modifiedData},
success: () => {
//close the modal
$('#editform').modal('hide');
//re-draw datatable
dataTable.ajax.reload();
}
});
});
});
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/937a319e2f.js"></script>
<script type="application/javascript" src="/main.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/main.css">
</head>
<body>
<!-- Table -->
<table id="example"></table>
<!-- Modal -->
<div class="modal fade" id="editform" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Row details</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group"><label>Name:</label><input data-src="name" class="form-control"></input></div>
<div class="form-group"><label>Title:</label><input data-src="title" class="form-control"></input></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-dark" id="submitedits">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
If you mean JQUERY DATATABLE then you can insert input fields (that would still retain the cell data) for every column within your table row as you desire and set the borders of the input field to not display, with css.
EXAMPLE TABLE
<style>
.no-input-border {
border: 'none' !important; background: 'none' !important;
}
</style>
<table id="dynamic_table">
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Address</th>
<th>Active</th>
<th>Action</th> <!-- This column would hold your buttons -->
</tr>
</thead>
<tbody>
</tbody>
</table>
EXAMPLE DATATABLE INITIALIZATION
var table = $('#dynamic_table').DataTable({
"order":[[ 0, 'asc' ]], // order by first column
"processing": true,
'paging': true,
'searching': true,
'retrieve': true,
'serverSide': true,
'ajax': {
'url': "your-ajax-url",
'type': 'POST'
},
'columns': [ //every **name:** value must be present in your json
{ data: null, name: 'name'},
{ data: null, name: 'state' },
{ data: null, name: 'address' },
{ data: null, name: 'active' },
{ data: null, name: 'id' } // column that holds your buttons
],
"columnDefs": [
{
"targets": 0, // column that inserts an input field
"data": 'name',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="name" value="'+cellData+'" />'
}
},
{
"targets": 1, // column that inserts an input field
"data": 'state',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="state" value="'+cellData+'" />'
}
},
{
"targets": 2, // column that inserts an input field
"data": 'address',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="state" value="'+cellData+'" />'
}
},
{
"targets": 3, // column that inserts an input field
"data": 'active',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="active" value="'+cellData+'" />'
}
},
{
"targets": 4, // column that holds your buttons
"data": 'id',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<button class="edit_row">Edit<button>'
}
}
],
'responsive': true,
'initComplete': function(settings, json) {
//Run a function when table first initializes
},
'drawCallback': function( settings ) {
//Run a function anytime table reloads when paginating
}
});
EXAMPLE DATATABLE ROW EDIT FUNCTION
$('#dynamic_table tbody').on('click', '.edit_row', function () {
var row = table.row( $(this).parents('tr') ); // row that was clicked
var d = row.data(); // data of the row button that was clicked .eg. console.log(d.name)
var index = row.index();
var json = { // json to be sent
id: d.id,
name: table.cell(index,0).nodes().to$().find('input').val(),
state: table.cell(index,1).nodes().to$().find('input').val(),
address: table.cell(index,2).nodes().to$().find('input').val(),
active: table.cell(index,3).nodes().to$().find('input').val()
}
/*Your Ajax Function Here*/
});
RELOAD DATATABLE FUNCTION
table.ajax.reload( function ( json ) {
//Run function after table reloads
});
You can create a custom button in datatable. You can go to this documentation to know how it works. Now in the action you can call some function inside it when the user click it the button will call the function in javascript and do what you want inside it.
Here's example code.
$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
$.ajax({
url: '/some url',
type: 'GET',
data: data,
success: function (data) {
console.log(data)
}
});
},
buttons: [
{ text: 'Add', name: 'btnAdd', action: function ( e, dt, node, config ) {
$.fn.addfunction();
}},
{ extend: 'selected', text: 'Edit', name: 'btnEdit', action: function ( e, dt, node, config ) {
$.fn.editfunction();
}},
{ extend: 'selected', text: 'Delete', name: 'btnDelete', action: function ( e, dt, node, config ) {
$.fn.deletefunction();
}},
],
"columns": [{
"title": "edit",
"data": null,
"className": "center",
"defaultContent": ' Edit / Delete '
}, {
"title": "name",
"data": "name"
}, {
"title": "id",
"data": "id"
},
]
});
$.fn.addfunction = function(){
//Your code here
}
$.fn.editfunction = function(){
//Your code here
}
$.fn.deletefunction = function(){
//Your code here
}
I added the idea of this document from datatables that create custom button and create and call function in jquery
There's also other way by using and giving id for the button. here's the example:
$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
$.ajax({
url: '/some url',
type: 'GET',
data: data,
success: function (data) {
console.log(data)
}
});
},
buttons: [
{ text: 'Add', name: 'btnAdd',
attr:{
id: 'btnAdd'
}},
{ extend: 'selected', text: 'Edit', name: 'btnEdit',
attr:{
id: 'btnEdit'
}},
{ extend: 'selected', text: 'Delete', name: 'btnDelete',
attr:{
id: 'btnDelete'
}},
],
"columns": [{
"title": "edit",
"data": null,
"className": "center",
"defaultContent": ' Edit / Delete '
}, {
"title": "name",
"data": "name"
}, {
"title": "id",
"data": "id"
},
]
});
$(document).on('click', '#btnAdd', function(e)
{
e.preventDefault();
e.stopPropagation();
//your code here
});
$(document).on('click', '#btnEdit', function(e)
{
e.preventDefault();
e.stopPropagation();
//your code here
});
$(document).on('click', '#btnDelete', function(e)
{
e.preventDefault();
e.stopPropagation();
//your code here
});
Sorry for many Edit Hope it helps!
Related
I have a datatable loaded from a query from my database. (+/- 10000 records)
The idea is that the user should be able to select multiple records to be later processed
First i thought to add a column with checkbox for the selection then when user is done with all his selection the application keep track of all selected rows then progress to the next step with "Next Button" some where on the page, but after 12 hours of trying i couldn't do it.
Then i thought to make it simpler by adding a button in each row so that every time the user clicks on this button the application save the selected id in a session variable.
<div class="panel-body">
<table id="userTable" class="table display compact order-column">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>City</th>
<th>Phone</th>
<th>Zipcode</th>
</tr>
</thead>
</table>
#section Scripts {
#Scripts.Render("~/bundles/datatable")
<script type="text/javascript">
$(document).ready(function () {
var ids;
var mytable = $('#userTable').DataTable({
"sDom": 'ltipr',
"bServerSide": true,
"ajax": {
"beforeSend": AjaxBegin,
"type": "POST",
"url": '/LocationModifier/UserHistory',
"contentType": 'application/json; charset=utf-8',
'data': function (data) { return data = JSON.stringify(data); },
'complete': AjaxComplete
},
"bProcessing": false,
"orderMulti": false,
"scrollX": true,
"deferRender": true,
"searchDelay": 7000,
"fixedHeader": {
"header": true,
"footer": true
},
"columnDefs": [
{ "defaultContent": "-", "targets": "_all" },
{ "className": "text-center custom-middle-align", "targets": [0, 1, 2, 3, 4, ] },
],
"colReorder": true,
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"columns": [
{
"title": "Select",
"data": "ID",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
return '<span class="glyphicon glyphicon-pencil btn-sm btn-info"></span>';
}
},
{ "data": "Name", "orderable": false },
{ "data": "City", "orderable": true },
{ "data": "Phone", "orderable": true },
{ "data": "Zipcode", "orderable": false },
],
"order": []
});
});
</script>
}
public ActionResult AddToCache(int id)
{
GetRecordAndAddeToCache(id);
// what should i return here, the page should not be refreshed????
}
There's no problem to implement your initial approach:
use some global set that will store selected row id's, like var rowsSelected = new Set();
add/delete id of the row being checked to that global variable upon clicking selection checkbox:
$('.markSelected').on('click', function () {
const selectedRowId = dataTable.row($(this).closest('tr')).data().id;
$(this).prop('checked') ? rowsSelected.add(selectedRow) : rowsSelected.delete(selectedRow);
});
upon table re-rendering append checkboxes to the first column and set those checked if rendered row id is present within rowsSelected:
render: function (data) {
return `<input type="checkbox" ${rowsSelected.has(data.id) ? 'checked' : ''}></input>`;
}
The complete demo, implementing that concept:
//table source
const srcData = [
{id: 1, item: 'apple', cat: 'fruit'},
{id: 2, item: 'pear', cat: 'fruit'},
{id: 3, item: 'carrot', cat: 'vegie'},
{id: 4, item: 'tomato', cat: 'vegie'},
{id: 5, item: 'cucumber', cat: 'vegie'}
];
//global variable that stores selected item id's
const selectedRows = new Set();
//datatables initialization
const dataTable = $('#mytable').DataTable({
dom: 't',
data: srcData,
columns: [
{data: null, render: function(data){
return `<input class="markSelected" type="checkbox" ${selectedRows.has(data.id) ? 'checked' : ''}></input>`;
}},
{data: 'item', title: 'item'},
{data: 'cat', title: 'cat'}
]
});
//selection checkboxes click handler
$('#mytable').click('.markSelected', function(){
const selectedRowId = dataTable.row($(event.target).closest('tr')).data().id;
$(event.target).prop('checked') ? selectedRows.add(selectedRowId) : selectedRows.delete(selectedRowId);
});
//proceed to the next step with selected row id's
$('#nextStep').on('click', function(){
console.log([...selectedRows]);
});
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
<button id="nextStep">Next Step</button>
</body>
</html>
You can use datatable's Row selection feature to achieve what you are trying to do.
$(document).ready(function() {
var table = $('#userTable').DataTable();
$('#userTable tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#submitButtonId').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
// You can use table.rows('.selected').data() to get all the selected Data
} );
} );
Reference
I'm trying to add an index column like this example ( https://datatables.net/examples/api/counter_columns.html ), in my table. I try to implement the code from the example to my program, but the results don't appear. How do I add an index column like the example, to my table ?
thank you
Table :
<table id="order_data">
<thead >
<tr >
<th style="text-align:center;" width="21%">Number</th>
<th style="text-align:center;" width="21%">Datetime </th>
<th style="text-align:center;" width="19%">Temp</th>
<th style="text-align:center;" width="21%">Humidity</th>
</tr>
</thead>
</table>
Javascript :
$(document).ready(function(){
$('.input-daterange').datepicker({
todayBtn:'linked',
format: "yyyy-mm-dd",
autoclose: true
});
fetch_data('no');
function fetch_data(is_date_search, start_date='', end_date='')
{
var dataTable = $('#order_data').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: '<h3 align ="center">Monitoring</h3>',
text: '<i class="fa fa-pencil"></i>',
messageTop: '<p align ="center"><strong>PDF</strong> created by PDFMake with Buttons for DataTables.</p>'
},
{
extend: 'pdfHtml5',
customize: function (doc) {
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
},
title: 'Monitoring',
titleAttr: 'PDF',
text: 'PDF',
}
],
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
"processing" : true,
"serverSide" : true,
bFilter:false,
"ajax" : {
url:"fetch.php",
type:"POST",
data:{
is_date_search:is_date_search, start_date:start_date, end_date:end_date
},
},
});
}
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if(start_date != '' && end_date !='')
{
$('#order_data').DataTable().destroy();
fetch_data('yes', start_date, end_date);
//$("#tabel").show();
document.getElementById('tabel').style.display = "block";
}
else
{
alert("Both Date is Required");
}
});
dataTable.on( 'order.dt search.dt', function () {
dataTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
});
The example you're referencing isn't using server side processing. Rather it's assuming a static data source. You have serverSide: true and using an AJAX request to retrieve the data from a source so there are a couple of ways to handle this:
1) Use column render to generate the index value after the data is retrieved:
{
"sName": "Index",
"render": function (data, type, row, meta) {
return meta.row; // This contains the row index
}
}
2.) Add the index value to your data source and retrieve it along with your url:"fetch.php" request. Though this would actually act more like a unique ID and less like row numbering.
There is also an api call for row().index() that you could leverage in a number of ways.
I need to edit the columns section of this code for change the content of tr and td for table generated by json response. For example, I need to insert a hyperlink on EFICAZ_TAB_RESULTADO column for use click event.
I don't know how to do this task and I need help!
$(document).ready(function(){
// Setup datatables
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings){
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
};
};
var table = $("#mytable").dataTable({
initComplete: function() {
var api = this.api();
$('#mytable_filter input').off('.DT').on('input.DT', function(){
api.search(this.value).draw();
});
},
oLanguage: {
sProcessing: "carregando ..."
},
processing: true,
serverSide: true,
searching: false,
ajax: {
"type": "POST",
"url": "/tab/getJsonAllOcorrenciasTabForMonth"
},
pageLength: 100,
columns: [
{"data": "EFICAZ_TAB_ID"},
{"data": "ID"},
{"data": "PERIODICIDADE"},
{"data": "EFICAZ_TAB_MES_ANO"},
{"data": "EFICAZ_TAB_ITEM_ID"},
{"data": "EFICAZ_TAB_META"}, // if EFICAZ_TAB_META é diferente de EFICAZ_TAB_RESULTADO
{"data": "EFICAZ_TAB_RESULTADO"}
],
order: [
[1, 'asc']
],
rowCallback: function(row, data, iDisplayIndex) {
var info = this.fnPagingInfo();
var page = info.iPage;
var length = info.iLength;
$('td:eq(0)', row).html();
}
}); // end setup datatables
// addClass para formatar estilo bootstrap ...
$("#mytable_length select").addClass("form-control")
});
I suggest utilizing the rowCallback. This allows you to modify the rows as they are being drawn to the table. You just have to select the cell within the respective row to modify it. I suggest adding a class to the column:
Add a Column Class
columns: [
...
{
"data": "EFICAZ_TAB_RESULTADO",
"className": "hyperlinkClass"
}
...
]
Modify that cell each time a new row is drawn
rowCallback: function(row, data, iDisplayIndex) {
$(row).find(".hyperlinkClass").html('HYPERLINK TEXT');
}
You can achieve that by using columnDefs property, e.g. add a click event on EFICAZ_TAB_RESULTADO column:
columnDefs: [{
"targets": [6],//index of EFICAZ_TAB_RESULTADO
"createdCell": (td, cellData, rowData, row, col) => {
$(td).css({
'color': '#007bff',
'cursor': 'pointer'
});
$(td).attr('title', 'Click Me');
$(td).click(e => {
alert(cellData) //call the function here
})
}
}
]
Fiddle for your reference.
the btnSearchName will open a Modal with table of the search result, then it has checkbox per row to select, then after I click the btnSubmit, the Modal will close and must put the selected ssn_or_tin column in an input field like '123, 645, 936, 743', I already tried many codes but not working, please help
$('#btnSearchName').on("click", function() {
Namestable = $('#NamesDatatable').DataTable({
"processing": true,
'select': {
'style': 'multi'
},
'order': [[1, 'asc']],
dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
"ajax": {
"url": '/Home/GetAllCusname',
"type": "POST",
"datatype": "json",
"data": function (d) {
d.searchParameters = {};
d.searchParameters.name = $('#txtName').val();
}
},
"columns": [
{
defaultContent: '',
className: 'select-checkbox',
'checkboxes': {
'selectRow': true
},
orderable: false
},
{ "data": "ssn_or_tin", "autoWidth": true },
{ "data": "name", "autoWidth": true }
]
});
});
$('#btnSubmit').on("click", function () {
var rows_selected = Namestable.column(0).checkboxes.selected(); //i have not tested this line of code yet if it's working,
maybe there is another way of getting the selected checkbox, maybe by their class if they have the 'selected' class
$.each(rows_selected, function () {
$('#txtSSNTIN').append(
//I don't know what code to put here, it must append the
'ssn_or_tin' values like '123, 953, 673' in the input field with
the id 'txtSSNTIN'
);
});
});
You could have try Onrowbound in DataTable. You dont have to specify these things
I have JQuery table like following image
I want to alert the ProductID once I click V link text in Action column
<table id="productTable">
<thead>
<tr>
<th>ProductID</th>
<th>TitleEN</th>
<th>TypeEN</th>
<th>ModifiedDate</th>
<th>Actions</th>
</tr>
</thead>
</table>
#* Load datatable css *#
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
#section Scripts{
#* Load DataTable js here *#
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#productTable").DataTable({
"info": false,
"processing": true,
"serverSide": true,
"filter": false,
"orderMulti": false,
"ajax": {
"url": "/Home/LoadProductData",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Product_ID", "name": "Product_ID", "autoWidth": true },
{ "data": "Product_Title_EN", "name": "Product_Title_EN", "autoWidth": true },
{ "data": "Product_Type_EN", "name": "Product_Type_EN", "autoWidth": true },
{ "data": "ModifiedDate", "name": "ModifiedDate", "autoWidth": true },
{
data: null,
className: "center",
defaultContent: ' V '
}
]
});
});
$('#editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});
</script>
}
currently I alerted its like this
alert($("data-Product_ID").val());
but it cant get the ID of that, hw can I do this ?
this is the html for table row
<tr class="even" role="row">
<td class="sorting_1">02</td>
<td>Current Accounts</td>
<td>Assets</td>
<td></td>
<td class=" center">
<a class="editor_view" href="#"> V </a>
</td>
Change your script to
$("#productTable").on('click', '.editor_view', function() {
var ID = $(this).closest('tr').find('td').eq(0).text();
alert(ID);
});
Note that your dynamically generating the table rows so you need event delegation attached to an element that exists in the DOM when the view is first generated (i.e the element with id="productTable").
Below is my Data table.
table_low_stocks.dataTable({
"bLengthChange": true,
"processing": false,
// "serverSide": true,
"bPaginate": false,
"bInfo": false,
"iDisplayLength" : 5,
"bSort" : true,
"ajax": {
'type': 'POST',
'url': "<?=action('AdvertiserproductsController#postLowstockproducts')?>"
},
"columns": [
/* {"data": "sr_no"}, */
{"data": "product_name"},
{"data": "inventory"},
{"data": "update"}
] // set first column as a default sort by asc
});
This is how i am rendering the HTML (Datatable from Controller )
return Datatables::of($data)
->add_column('action','<a data-productid="{{$sr_no}}" class="label label-sm label-messages-btn update-product"> <i class="fa fa-pencil-square-o"></i> Update Stock </a>')
->make(true);
If you have seen above i have given data-productid="{{$sr_no}}" to a tag
so ultimately that is what you have to give anyhow,.
Now from the jquery part.what have done is .
$(document).on("click",".update-product", function(e){
e.preventDefault();
var getProductId = $(this).data("productid");
alert(getProductId);
});
and i got the product Id :-)
to give data attribute do like
data-productid="{{$sr_no}}"
and to get the data attribute u have to use
$(selector).data("productid");
Hope this is helpfull to you.
$('#editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});
Here you have used "editor_view" as ID and I can view it is set as a class, so it will not work. It should be like
$('.editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});