We Keep Coding

HTML Table export with jsPDF not responsive

why my table in pdf file like this ? i really confused about this.
table in pdf
table in html
package used: jsPDF
function for generate pdf
function generatePdf() {
var doc = new jsPDF("p", "pt", "a4");
var pdfjs = document.querySelector("#toPDF");
doc.html(pdfjs, {
callback: function (doc) {
doc.save("output.pdf");
},
});
}
table code
<table class="w-full mt-1">
<thead>
<tr>
<th>No</th>
<th>Jenis Saham</th>
<th>Pemilik</th>
<th>Jumlah Saham</th>
<th>Persentase Saham (%)</th>
<th>Nilai (dalam Rupiah)</th>
</tr>
</thead>
<tbody>
<tr class="w-full text-center">
<td>1</td>
<td>asd</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>Rp. 100</td>
</tr>
</tbody>
</table>
i expect normal table
expect result

Is there any way to complete an array with values of clicked rows, after a jQuery DataTable is loaded by submitting a form?

Hi guys I have a problem when I'm using jQuery datatable. After Datatable is loaded by submitting an ID to the server, and then server response with the data that I render then into DataTable. In that DataTable I want to make multiple row selection and the values that I want to push into array are for example all the values of first column. My code below is everything that I have created now.
The HTML Code:
<form name="search_form_order" id="search_form_order" novalidate="">
<input type="text" name='login_id' id="login_id" class='form-control'>
<button type="submit" name="search" id="search">Search</button>
</form>
<table id="orders_table" width='100%'>
<thead>
<tr>
<th>Login ID</th>
<th>Order ID</th>
<th>Comment</th>
<th class="disabled-sorting">Actions</th>
</tr>
</thead>
<tfoot>
<th>Login ID</th>
<th>Order ID</th>
<th>Comment</th>
<th class="disabled-sorting">Actions</th>
</tfoot>
</table>
jQuery Code:
//This is the part where user submit the id parameter
$('#search_form_order').on('submit', function(event) {
event.preventDefault();
var id = $('#login_id').val();
$('#orders_table').DataTable().destroy();
loadOrdersTable(id);
});
//This is the function
function loadOrdersTable (id) {
table=$('#orders_table').DataTable({
responsive: true,
processing: true,
serverSide: false,
lengthMenu: [[100, -1], [100, "All"]],
"ajax": {
url: "/list_orders.php",
type:"POST",
dataSrc: "",
data: {login_id:id}
},
columns: [
{data: 'login_id', name: 'login_id'},
{data: 'order_id', name: 'order_id'},
{data: 'comment', name: 'comment'},
{data: 'actions', name: 'actions'}
]
});
}
Until here everything works perfectly, but when I want to select the the order_id-s of each row, the below jQuery code do not work:
var dataArr = [];
$('#orders_table tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
var id= $(this).find('td').eq(1).text();
dataArr.push(id);
});
console.log(dataArr);
This I'm using because I want to populate this array, to make bulk edit or bulk delete of all selected rows. On console it is displayed only this '[]', as output since onlcick event do not get the value from table rows.
Thank you!

your mistake is that you have your console.log outside of the event handler. That means that it's executed when the page is loaded and thus the array is empty.
If you move that inside your event handler (1 before) you'll se that everytime you click, the ID is pushed to the array and then shown at console.
Here is a working snippet:
PD: Note that everytime you click on one row the ID will be added to the array causing possible duplications, meanwhile the toggle will.. toggle, probably causing unexpected behaviours. You should need to add extra logic to avoid that
var dataArr = [];
$('#orders_table tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
var id= $(this).find('td').eq(1).text();
dataArr.push(id);
console.log(dataArr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="orders_table" width='100%'>
<thead>
<tr>
<th>Login ID</th>
<th>Order ID</th>
<th>Comment</th>
<th class="disabled-sorting">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>login_id</td>
<td>order_id</td>
<td>comment</td>
<td>actions</td>
</tr>
</tbody>
<tfoot>
<th>Login ID</th>
<th>Order ID</th>
<th>Comment</th>
<th class="disabled-sorting">Actions</th>
</tfoot>
</table>

Get attribute value from datatables row for every record

I am working with datatables and I want to edit and delete data table records
When I do console.log(row) following output I get:
["user1", "Edit"]
(index):274 (2) ["user2", "Edit"]
(index):274 (2) ["user3", "Edit"]
(index):274 (2) ["user4", "Edit"]
(index):274 (2) ["user5", "Edit"]
What I want is to get data-id from render: function (data, type, row) which I have used in datatable script and when click on edit button I want to get specific id in alert but I am unable to extract data-id.
My jQuery code:
$.fn.dataTable.ext.errMode = 'none';
var table = $('#catgeory_list').DataTable({
processing: true,
language: {
emptyTable: 'no result found.'
},
columnDefs: [{
visible: true,
targets: 0,
render: function (data, type, full, meta) {
return data;
}
}, {
visible: true,
targets: 1,
render: function (data, type, row) {
console.log(row);
return '<button id="editBtn" class="btn btn-wrang btn-flat edit" name="editBtn" type="button">Edit</button>' + ' <button id="deleteBtn" class="btn btn-danger btn-flat delete" name="deleteBtn" type="button" >Delete</button>';
}
}
],
});

In order to get any source object/array property/item for the row being clicked, you don't need anything more than simple row().data() API method invoked against DataTable row (selected by the closest to the clicked button <tr> node):
$('table').on('click', 'tbody td button', function(){
const rowData = dataTable.row($(this).closest('tr')).data();
alert(`Row ID is ${rowData.id}`);
});
Here, dataTable is a variable, you assign your DataTable to.
Full-blown DEMO you might find below.
Also, considering your ultimate goal, you might find of use my answer over here, which provides complete working demo of editable DataTable. So, if you find that helpful, upvotes are appreciated ;)
//src data
const srcData = [
{id: 1, item: 'apple'},
{id: 2, item: 'banana'},
{id: 3, item: 'tomato'}
];
//datatables init
const dataTable = $('table').DataTable({
dom: 't',
data: srcData,
columns: [{data: 'item', title: 'Item Name', render: data => data+'<button>Show Id</button>'}]
});
//click handler
$('table').on('click', 'tbody td button', function(){
const rowData = dataTable.row($(this).closest('tr')).data();
alert(`Row ID is ${rowData.id}`);
});
td button {float: right}
<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><table></table></body></html>

You can wrap data or row parameter from callback function with jQuery $() to get any element/node attributes or DOM manipuation. Refer also toJQuery() for dealing with Datatables API instances.
Render
render: function(data, type, row, meta){
var data_id = $(data).data('id');
console.log('Columns.Render:',data_id);
return data + " : data-id(" + data_id+")";
}
createdRow
createdRow: function (row, data, index) {
var data_id = $('td a.edit_row', row).data('id');
console.log('CreatedRow:',data_id);
}
Click Event
$("a.edit_row").click(function(){
var data_id = $(this).data('id');
alert(data_id);
});
Working Live Demo:
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [
{
targets: 1,
render: function(data, type, row, meta){
var data_id = $(data).data('id');
console.log('Columns.Render:',data_id);
return data + " : data-id(" + data_id+")";
}
},
],
createdRow: function (row, data, index) {
var data_id = $('td a.edit_row', row).data('id');
console.log('CreatedRow:',data_id);
}
});
$("a.edit_row").click(function(){
var data_id = $(this).data('id');
alert(data_id);
});
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css"
rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Edit</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Edit</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Edit</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>

How to add extra field in datatable which is not database

I am trying to add edit and delete button in data table.
I have html
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</tfoot>
</table>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>"
});
});
I tried adding column in thead and tbody but it is giving me alert saying
DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
Server returning data
{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon"],["Garrett","Winters"],["Ashton","Cox"],["Cedric","Kelly"],["Airi","Satou"],["Brielle","Williamson"],["Herrod","Chandler"],["Rhona","Davidson"],["Colleen","Hurst"],["Sonya","Frost"],["Jena","Gaines"],["Quinn","Flynn"],["Charde","Marshall"],["Haley","Kennedy"],["Tatyana","Fitzpatrick"],["Michael","Silva"],["Paul","Byrd"],["Gloria","Little"],["Bradley","Greer"],["Dai","Rios"],["Jenette","Caldwell"],["Yuri","Berry"],["Caesar","Vance"],["Doris","Wilder"],["Angelica","Ramos"],["Gavin","Joyce"],["Jennifer","Chang"],["Brenden","Wagner"],["Fiona","Green"],["Shou","Itou"],["Michelle","House"],["Suki","Burks"],["Prescott","Bartlett"],["Gavin","Cortez"],["Martena","Mccray"],["Unity","Butler"],["Howard","Hatfield"],["Hope","Fuentes"],["Vivian","Harrell"],["Timothy","Mooney"],["Jackson","Bradshaw"],["Olivia","Liang"],["Bruno","Nash"],["Sakura","Yamamoto"],["Thor","Walton"],["Finn","Camacho"],["Serge","Baldwin"],["Zenaida","Frank"],["Zorita","Serrano"],["Jennifer","Acosta"],["Cara","Stevens"],["Hermione","Butler"],["Lael","Greer"],["Jonas","Alexander"],["Shad","Decker"],["Michael","Bruce"],["Donna","Snider"]]}
Can anyone help me solve this issue

You just need to add its HTML in your DataTable definition
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>",
"columns": [
{
"targets": -1,
"data": null,
"orderable": false,
"defaultContent": [
"<i class='glyphicon glyphicon-edit'></i>"+
"<i class='glyphicon glyphicon-trash'></i>"]
}
]
} );
DEMO : https://jsfiddle.net/Prakash_Thete/evfchh7q/
Change your table definition as below(Added one more header as you are sending data for two columns + edit button column).
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</tfoot>
</table>

How to hide or show column of table created using datatables in javascript?

Do you know how to hide or show column when datatable's source is javascript?
Methods for showing or hiding columns
table = $('#example').DataTable();
var col = table.column("0").visible(false);
work when data source is directly into html
<table id="example" class="row-border hover">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
...
But it does not work and launch an error when DataTable has a javascript source
var table = $('#example').dataTable({
"data": source,
"columns": columns,
"columnDefs": defs
});
var col = table.column("0").visible(false);//ERROR!
Do you know how to hide a column of Datatables with a javascript source please?

Try something like this,
var table = $('#example').dataTable({
"data": source,
"columns": columns,
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull )
{
$('td:eq(0)', nRow).hide();
}
});
Updated. Try to add fnRowCallback. thanks!

I finally found another answere : it doesn't depends of html or json source but there is a difference between DataTable() which is the new version and dataTable() the old version
column(n).visible(bool)
works for DataTable()
fnRowCallback
works for dataTable()