I am using Datatables API but am not able to add multiple buttons in one row.
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button>'
}]
});
Try this code
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button>'
+ '<button class="btn-delete" type="button">Delete</button>'
}]
});
Or
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button> <button class="btn-delete" type="button">Delete</button>'
}]
});
Update :
You can use datatable render function to update the column values.
<table class="table" id="datatable" >
<thead>
<tr>
<th>Name </th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Jquery Datatable Code :
$('#datatable').DataTable ({
"data" : FinalResult,
"columns" : [
{ "data" : Name},
{ "data" : null,render: function ( data, type, row ) {
return '<button class="btn-view" type="button">EDIT</button>';
} },
{ "data" : null,render: function ( data, type, row ) {
return '<button class="btn-delete" type="button">Delete</button>';
} }
]
});
Fiddel Link : https://jsfiddle.net/jijomonkmgm/j6madey4/
<table id="table_invdata" class="table table-striped table-bordered">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>Email-id</th>
<th>Salary</th>
<th>Position</th>
<th></th>
</tr>
</table>
Related
I want to output this JSON data to a table.
I do not know how to put the contents of "fields" into the same Tr tag.
{
"page": [
{
"type": "Type A",
"fields": [
{
"type": "Type1",
"code": "field1",
"size": {
"width": "200",
"height":"50"
}
},
{
"type": "Type2",
"code": "field2",
"size": {
"width": "250",
"height":"50"
}
}
]
},
{
"type": "Type B",
"fields": [
//....
]
}
],
"revision": "1"
}
I wrote this html
<table>
<thead>
<tr>
<th>Parent-Type</th>
<th>Child-Type</th>
<th>code</th>
<th>width</th>
<th>height</th>
</tr>
</thead>
<tbody id="my-tbody" v-cloak>
<tr v-for="(item, i) in rowData">
<td>
{{item.type}}
</td>
<td v-for="(field, j) in Object.keys(item.fields)">
{{field.code}}
</td>
</tr>
</tbody>
</table>
<scprit>
(() =>{
new Vue({
el: "#my-tbody",
data: {
rowData: []
},
created() {
let _self = this
getLayout().then(function (resp) {
_self.rowData = resp.page;
});
}
});
})();
</script>
I want to create a tr tag for each "page" ,and a td tag for each "fields".
Is it better to format in single-tiered JSON and set it in data?
Thanks.
Try something like this:
<table>
<thead>
<tr>
<th>Parent-Type</th>
<th>Child-Type</th>
<th>code</th>
<th>width</th>
<th>height</th>
</tr>
</thead>
<tbody id="my-tbody" v-cloak>
<tr v-for="item in rowData" :key="item.type">
<td>
{{item.type}}
</td>
<td v-for="field in item.fields" :key="field.code">
{{field.code}}
</td>
</tr>
</tbody>
</table>
Regards
I have a table:
<table class="table table-bordered table-hover" id="user-table">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="name">Name</th>
<th data-field="email">Email</th>
<th data-field="company">Company</th>
<th data-field="actions">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john#doe.com</td>
<td>Doe Inc.</td>
<td>
<div class="btn-group">
<i class="fa fa-pencil"></i>
</div>
</td>
</tr>
</tbody>
</table>
My current way to add row:
var columns = $.map(data,function(v,k){
return v;
});
var rowNode = table.row.add(columns).order([0, 'desc']).draw(false).node();
$(rowNode).addClass('selected');
setTimeout(function(){$(rowNode).removeClass('selected');}, 2000);
My data looks like this:
{
"data":[ {
"id": 2,
"name": "Jane Doe",
"email": "jane#doe.com",
"company": "Doe Inc."
}
]
}
Is there a way to add row based on columns? Instead of returning v on a mapped data, I can directly insert data[0] using row.add(). I've been searching but can't get the exact scenario.
Apparently, the purpose is for shuffled data. In a table that have 15 columns, I don't have to worry about the proper column arrangements.
I found this https://datatables.net/reference/api/row.add() example #1 but obviously the documentation says:
Data to use for the new row. This may be an array, object, Javascript object instance or a tr element. If a data structure is used (i.e. array or object) it must be in the same format as the other data in the table (i.e. if your table uses objects, pass in an object with the same properties here!).
If you specify columns (or columnDefs) with data attributes, you can add row or rows in JSON / object literal format:
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' },
{ data: 'company' }
]
You must also specify the last column, even it is not targeting any data. You can use render(), createdCell() or defaultContent:
const actions = `
<div class="btn-group">
<i class="fa fa-pencil"></i>
</div>
`;
var table = $('#user-table').DataTable({
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' },
{ data: 'company' },
{ data: null, defaultContent: actions }
]
...
})
Now you can insert data from above:
var rowNode = table.row.add(data.data[0]).order([0, 'desc']).draw(false).node();
or all rows :
table.rows.add(data.data).draw()
Anchor tag on field column .
How do i add a anchor tag along with title in datatable .
Here is the code:
$(document).ready(function ()
{
debugger
$('#TableId').DataTable(
{
//"columnDefs": [
// { "width": "5%", "targets": [0] },
// {
// "className": "text-center custom-middle-align",
// "targets": [0, 1, 2, 3, 4, 5, 6]
// },
//],
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'width': '1%',
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<input type="checkbox">';
}
}],
"language":
{
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
},
"processing": true,
"serverSide": true,
"ajax":
{
"url": "/TicketTemplate/GetData",
"type": "POST",
"dataType": "JSON"
},
"columns": [
{ "data": '' },
{ "data": "CreatedDate" },
{ "data": "Title" },
//{
// //"data": "Title",
// "render": function (data, type, row, meta) {
// //return '' + Title + '';
// return '' + data + '';
// }
//},
{ "data": "Name" },
{ "data": "Email" },
{ "data": "AssignTo" },
{ "data": "Status" }
]
});
});
Here in the above code in the case of "Title" it must be an a anchor tag..
so any suggestions??
Here is the table:
<table class="table table-striped table-bordered table-hover" id="TableId">
<thead>
<tr>
<th>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable" id="chkall" data-set="#sample_2.checkboxes" onclick="Selectallcheckbox()" />
<span></span>
</label>
</th>
<th> Date Created </th>
<th> Title </th>
<th> User Name </th>
<th> User Email </th>
<th>Assigned To </th>
<th> Status </th>
</tr>
</thead>
<tbody>
#foreach (var itm in Model.TicketList)
{
<tr class="odd gradeX">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1" />
<span></span>
</label>
</td>
<td class="center"> #itm.CreatedDate.ToString("MM/dd/yyyy") </td>
<td>
#*#itm.Title*#
#itm.Title
</td>
<td> #itm.Name </td>
<td>
#itm.Email
</td>
<td> #itm.AssignTo </td>
<td>
<span class="label label-sm label-warning"> #itm.Status </span>
</td>
</tr>
}
How do i show the title bar along with anchor tag??
Do like this,
"columns": [
{
"name": "Name",
"render": function (data, type, row) {
return "<a href=" + row.myURL+ "/"+ row.id+ "
class='_myCkass' id=" + row.myID + ">" + row.fieldMark + "
</a>";
}
},
{ "data": "CreatedDate" },
//Rest field
],
I have a bootstrap table with data from remote source, but I can't find how to add data to .
This is my source data:
$ajax[] = array(
"qta" => $row['qta'],
"name" => $row['name'],
"description" => $row['description']
);
but I would like to have it like:
$ajax[] = array(
"id" => $row['id'], //123
"qta" => $row['qta'],
"name" => $row['name'],
"description" => $row['description']
);
in order to have my table row like:
<tr data-pk="123">
<td>...qta...</td>
<td>...name...</td>
<td>...description...</td>
</tr>
How could I achieve this? Maybe some responseHandler? I'm pretty new to BS Table.
Use Data-tables
HTML table
<table id="data" class="display table table-striped table-bordered">
<thead>
<tr>
<th>Row 1</th>
<th>Row 2</th>
<th>Row 3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Server side
//List list = new LinkedList();
rs1 = s1.executeQuery("select * from somewhere");
obj = new JSONObject();
obj.put("row1", rs1.getString("rowfromdb1"));
obj.put("row2", rs1.getString("rowfromdb2"));
obj.put("row3", rs1.getString("rowfromdb3"));
//list.add(obj);
//return obj;
//return list
And JavaScript for Fill in data
//settings for your datatable
$(document).ready(function() {
$('#data').DataTable({
"columns": [{
"data": "row1",
"width": "30%"
}, {
"data": "row2",
"width": "30%"
}, {
"data": "row3",
"width": "40%"
}]
});
});
//ajax call which fill up your table on load of your page/change value of some object
$.ajax({
type: "GET",
url: "myScript",
data: "param1=" + value,
success: function(msg) {
$('#data').dataTable().fnClearTable();
$('#data').dataTable().fnAddData(
JSON.parse(msg.trim())
);
}
}
});
Hope it helps you
I am using mRender to add checkboxes in the first column of the tbody... the correct css styling is being applied, but they are not stylized when I view the table. I can only assume this is because I am using mRender to add these values in, however, if I do other css like changing color of text it works fine. I have no problem with the checkbox in the thead being properly styled, but this is included by default with the html. Ideas?
the html:
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
the js:
$('#sample_1').dataTable({
//start my code
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/assets/data-tables/test-normal.php",
//end my code
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"bSortable": false,
"mRender": function ( data, type, full ) {
return '<input type="checkbox" class="checkboxes" value="'+data+'" />';
}
} ],
// set the initial value
"iDisplayLength": 5,
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
});
Had to use :
"fnInitComplete": function() {
$(".checkboxes").uniform();
}
You missed the mData portion
In aoColumns, not aoColumnDefs, use the following
{ "mData": null , // can use null, the numeric array number, or assoc array string
"mRender" : function ( data, type, full ) {
return '<input type="checkbox" class="checkboxes" value="'+data+'" />'}
},