I am trying full row editor functionality of data-tables.
Editor buttons are not coming.
Without that editor modal will not get displayed.
Inline editor is enabling the columns to edit but its not changing the value of the column.
JS code for data-table.
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "resources/data/data.txt",
table: "#NACH-User-Table",
idSrc: 'id',
fields: [ {
label: "User ID:",
name: "UserID"
}, {
label: "Name:",
name: "Name"
}, {
label: "Email ID:",
name: "emailID"
}, {
label: "Role:",
name: "Role"
}, {
label: "Status:",
name: "Status"
}
]
} );
$('#NACH-User-Table').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
submit: 'allIfChanged'
} );
} );
$('#NACH-User-Table').DataTable({
"ajax" :"resources/data/data.txt",
select: {
style: 'os',
selector: 'td:first-child'
},
ordering: true,
"dom": 'B<"top"fl>rt<"bottom"ip><"clear">',
button: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
"columns": [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ "data": "UserID"},
{ "data": "Name" },
{ "data": "emailID"},
{ "data": "Role"},
{ "data": "Status"}
]
});
});
<table id="NACH-User-Table" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>UserID</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
</table>
Libraries Included
<script src="./resources/DataTables/jQuery-3.3.1/jquery-3.3.1.min.js"> </script>
<script src="./resources/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./resources/DataTables/datatables.min.js"></script>
<script src="./resources/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="./resources/DataTables/DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="./resources/DataTables/Buttons-1.5.4/js/dataTables.buttons.min.js"></script>
<script src="./resources/DataTables/Buttons-1.5.4/js/buttons.bootstrap4.min.js"></script>
<script src="./resources/DataTables/Buttons-1.5.4/js/buttons.print.min.js"></script>
<script src="./resources/DataTables/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="./resources/DataTables/Responsive-2.2.2/js/responsive.bootstrap4.min.js"></script>
<script src="./resources/DataTables/Editor-1.8.1/js/dataTables.editor.min.js"></script>
<script src="./resources/DataTables/Editor-1.8.1/js/editor.bootstrap4.min.js"></script>
All the required CSS are Included as well.
Related
I have a php/javascript application (Apache 2.4 / php8 on Windows). I am using jquery DataTables (datatables.net) and have coded:
dom: 'Brftip',
buttons: ['excel']
for several of the tables in my application.
This works great when I build the table dynamically in javascript as the result of a selection in another table. However when I code that in a table that is built in my document ready function The button does not display. Below is the relavent section of my $(document).ready() function:
$(document).ready(function () {
$('#jobs').DataTable({
dom: 'Bfrtip',
buttons: ['excel'],
select: {
sytle: 'single',
items: 'row'
},
ajax: {
url: "php/joblist.php",
type: "POST",
dataSrc: "",
data: function (d) {
var activeOnlyCheckbox = document.getElementById("activeOnly");
if (activeOnlyCheckbox.checked) {
return JSON.stringify({activeOnly: 'yes'});
} else {
return JSON.stringify({activeOnly: 'no'});
}
}
},
paging: false,
scrollY: '60vh',
scrollCollapse: true,
columns: [
{data: "JOB_ID"},
{data: "LAST_START"},
{data: "LAST_FINISH"},
{data: "LAST_STATUS"}
],
"columnDefs": [{
"targets": 3,
"data": "LAST_STATUS",
"render": function (data, type, row, meta) {
if (screen.width > 1500) {
return "<div class='text-wrap status-column'>" + data + "</div>";
} else {
return "<div class='text-wrap status-column'>" + data + "</div>";
}
}
}]
});
});
What am I missing?
Here, I created dummy response data and populated it to the table to see if it will print an excel file, and it works just fine.
var data = [
{"JOB_ID": "1",
"LAST_START": "Random Data",
"LAST_FINISH": "More Random Data",
"LAST_STATUS": "Last one"}
]
$(document).ready(function() {
var table = $('#myTable').DataTable({
data: data,
paging: false,
scrollY: '60vh',
scrollCollapse: true,
select: {
sytle: 'single',
items: 'row'
},
ajax: {
url: "php/joblist.php",
type: "POST",
dataSrc: "",
data: function (d) {
var activeOnlyCheckbox = document.getElementById("activeOnly");
if (activeOnlyCheckbox.checked) {
return JSON.stringify({activeOnly: 'yes'});
} else {
return JSON.stringify({activeOnly: 'no'});
}
}
},
columns: [
{data: "JOB_ID"},
{data: "LAST_START"},
{data: "LAST_FINISH"},
{data: "LAST_STATUS"}
],
"columnDefs": [{
"targets": 3,
"data": "LAST_STATUS",
"render": function (data, type, row, meta) {
if (screen.width > 1500) {
return "<div class='text-wrap status-column'>" + data + "</div>";
} else {
return "<div class='text-wrap status-column'>" + data + "</div>";
}
}
}],
dom: '<"toolbar"><"right"B>rt',
buttons: ['excel'],
order: [
[0, 'asc']
]
});
});
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
</head>
<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
<thead class="table-dark">
<tr>
<th>Job ID</th>
<th>Last Start</th>
<th>Last Finish</th>
<th>Last Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Make sure you are including the right extensions for the table. In order for the excel button/export to work. You need to have the Buttons as well as HTML5 Export extensions.
I am adding bootstrap button on the export buttons of datatables. It does not seem to render. I am adding btn btn-primary but all that does is add a blue border to the button. How can I ake it a bootstrap primary button?
I also want to add some padding to the button. Is there a way to do that?
My code:
<table id="example" class="table table-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>Version</th>
<th>Count</th>
<th>Average</th>
</tr>
</thead>
<tbody></tbody>
</table>
let table = $('#example').DataTable({
data: data,
columns: [{
data: 'date'
}, {
data: 'version'
}, {
data: 'count'
}, {
data: 'avg'
}],
dom: 'lBfrtip',
buttons: [{
extend: 'csv',
text: 'Export',
filename: 'Export File',
className: 'btn btn-primary'
}, ]
});
My output:
I want the button to look like:
and I also want to add some padding between the button and Show 10 entries.
How do I do this?
Please see if this works. To space the Export button, you can use Bootstrap's spacing classes
Included styles & scripts
<!-- Bootstrap CSS and JQUERY-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
$(document).ready(function() {
let table = $('#example').DataTable({
columns: [{
data: data,
data: 'date'
}, {
data: 'version'
}, {
data: 'count'
}, {
data: 'avg'
}],
dom: 'lBfrtip',
buttons: [{
text: 'Export',
filename: 'Export File',
className: 'ml-3 btn btn-primary',
action: function ( e, dt, node, config ) {
alert( 'Pressed!' );
}
}, ]
});
});
I'm trying to achieve SPA with help angular route provide for that i'm using ng-view for injecting the views. in one page i'ave a jquery datatable where i need to get the index of row selected by using jquery. but this is not happing inside ng-view. i tried by using directives also but no luck.
can someone help me in this
Home.html
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
Get Selected Rows
Controller.Js:
app.controller("HomeController", function ($scope, $http,$window) {
$('#example').DataTable({
"ajax": {
"url": "test.json",
"dataSrc": ""
},
"columns": [
{ "data": null },
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
$scope.$broadcast('dataloaded');
$scope.Customers = $("example").DataTable().data;
console.log("Result: ", $scope.Customers.length);
$scope.GetDetails = function () {
var table = $("example").DataTable();
var rowid = table.row(this).index();
alert(rowid);
};
$scope.GetRowID = function () {
$('#example tbody').on('click', 'tr', function () {
console.log("inside");
debugger;
var table = $("#example").DataTable();
alert('Row index: ' + table.row(this).index());
});
};
$scope.init();
I have a DataTable structured like the following:
<div class="table-responsive">
<table class="table table-striped table-condensed table-bordered" id="mainSutable2" style="width: 100%">
<thead>
<tr>
<th>Comment Time</th>
<th>ID</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
var mainSutable2 =$('#mainSutable2').DataTable({
paging: false,
ordering: true,
info: true,
oLanguage:{
sProcessing: 'No Data To Display', //change language of default "Processing" dialogue
sSearch: 'Filter'
},
data: trackingNotes,
columns: [
{ data: "ID" },
{ data: "comment" },
{ data: "dt" },
{ data: "status"}
]
});
I am trying to populate this table using the following: Please note MainSutable is another table that has a row that include the object value.
var trackingNotes = {};
trackingNotes = mainSutable.row(this).data().tracking_notes;
//tracikingNotes equals the following
/*
Object {tracking_note: Array[2]}
tracking_note: Array[2]
0:Object
ID: "12345"
comment: "yo"
dt: "2016-06-06 12:50:46.0"
guid: "9999"
status: "1"
1:Object
ID: "12346"
comment: "hey"
dt: "2016-06-08 12:50:46.0"
guid: "9999"
status: "2"
*/
If anyone has any tips of information that could lead me in the right direction, it would be greatly appreciated.
Not sure why it's not working on your side. I've tried replicating the problem but it's working for me and the data is displayed in the DataTable maybe there's an issue with the script references to dataTable.js or maybe you're not calling the binding logic inside the document load.
Copy and paste the example below in a new page and run it, you will see that it works.Figure out what's different in your code compared to mine and I'm sure it will help you solve the problem:
<head runat="server">
<title></title>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(function () {
var trackingNotes = [];
var note1 = { ID: "1", comment: "comment1", dt: new Date(), guid:"1", status: "1" };
var note2 = { ID: "2", comment: "comment 2", dt: new Date(), guid: "2", status: "1" };
var note3 = { ID: "3", comment: "comment 3", dt: new Date(), guid: "3", status: "0" };
trackingNotes.push(note1);
trackingNotes.push(note2);
trackingNotes.push(note3);
var mainSutable2 = $('#mainSutable2').DataTable({
paging: false,
ordering: true,
info: true,
oLanguage: {
sProcessing: 'No Data To Display', //change language of default "Processing" dialogue
sSearch: 'Filter'
},
data: trackingNotes,
columns: [
{ data: "ID" },
{ data: "comment" },
{ data: "dt" },
{ data: "status" }
]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="table-responsive">
<table class="table table-striped table-condensed table-bordered" id="mainSutable2" style="width: 100%">
<thead>
<tr>
<th>Comment Time</th>
<th>ID</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
I'm having a problem displaying my data on my jQuery DataTable using AJAX. I'm using the library from datatables.net. I've tried packaging the JSON in many different formats and nothing is working. I've also messed around with the 'columns' section, interchanging 'title' and 'data.' I only have one event to display for now, but the bottom of the table shows something crazy like 4,000 entries. Here is my code:
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"processing": true,
"ajax": {
"url": "/api/EventsApi/GetAll",
"dataSrc": ""
},
columns: [
{ title: "Title" },
{ title: "Template" },
{ title: "Capacity" },
{ title: "Boarding Location" },
{ title: "Status" },
{ title: "Edit / Delete" }
//{ "data": "title" },
//{ "data": "eventTemplateID" },
//{ "data": "locomotive.capacity" },
//{ "data": "boardingLocationStart.city" },
//{ "data": "status" },
//{ "data": "status" }
]
});
});
<div class="title-content">#ViewBag.Title</div>
<div id="dataTable">
<table id="myTable" class="table table-hover" style="text-align: center;">
<tbody id="tBody">
<!-- Table body data goes here -->
</tbody>
</table>
</div>
Here is the JSON that's being returned from the AJAX call:
{"data":[{"tripEventID":1,"extraDetails":"this train has special details","eventName":"ZombieTrainEventName ","departureDate":"\/Date(1443715200000)\/","returnDate":"\/Date(1443718800000)\/","eventCapacityOveride":100,"eventTemplateID":3,"title":"The Zombie Train ","companyID":1,"description":"description of zombie train ride ","boardingClosed":30,"status":1,"boardingLocationStart":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationStartTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnFrom":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"allowFlexableReturnDate":false,"product":[],"productBundle":[{"bundleID":10,"companyID":1,"displayName":" Pumkin Bundle copy Test","price":0.0100,"tax":0.0200,"productList":[]}],"locomotive":{"trainID":1,"companyID":1,"title":"Skunk_Steam ","type":1,"description":"Steam locomotive ","capacity":998,"status":0},"media":{"mediaID":1,"companyID":1,"hero":[],"gallery":[{"mediaDetailID":6,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":null,"url":null},{"mediaDetailID":7,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":"path6","url":"url6"},{"mediaDetailID":8,"formatTypeID":2,"fileName":"testimage7.txt","order":1,"path":"path7","url":"url7"}],"inside":[{"mediaDetailID":1,"formatTypeID":1,"fileName":"testimage.txt","order":1,"path":null,"url":null},{"mediaDetailID":2,"formatTypeID":1,"fileName":"testimage2.txt","order":1,"path":null,"url":null},{"mediaDetailID":3,"formatTypeID":1,"fileName":"testimage3.txt","order":1,"path":null,"url":null}]},"duration":15,"isExclusive":false,"timeAtDestination":45,"isOneWay":false}]}
Like I said, I've tried repackaging the JSON as nested objects and arrays with nothing working. Am I missing something obvious? Any help is appreciated, thank you!
You have to name the columns in your js like the json index keys like this:
$(document).ready(function() {
$('#myTable').DataTable( {
"ajax": "path/to/your/file.json",
"columns": [
{ "data": "title" },
{ "data": "eventTemplateID" },
{ "data": "eventCapacityOveride" },
{ "data": "boardingLocationStart.streetAddress" },
{ "data": "status" },
{ "data": null }
],
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
} );
Note that you can define custom data in tables with the columnDefs option.
And than edit your HTML with something like this:
<table id="myTable" class="table table-hover" style="text-align: center;">
<thead>
<tr>
<th>Title</th>
<th>Template</th>
<th>Capacity</th>
<th>Boarding location</th>
<th>Status</th>
<th>Edit / Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Title</th>
<th>Template</th>
<th>Capacity</th>
<th>Boarding location</th>
<th>Status</th>
<th>Edit / Delete</th>
</tr>
</tfoot>
</table>
Here you can find a working fiddle