Buttons (New, Edit, Delete) won't display on first load, why?
Buttons (New, Edit, Delete) won't display on first load, why?
rg
Posts: 4Questions: 1Answers: 0
On first load of this page the buttons are not displayed at the top. If I load the page again by clicking on the link in left nav. bar buttons are rendered on top-left. Any ideas?
I have spent a day trying to figure this out. Any help is much appreciated.
Below is part of the HTML code that gets pulled and displayed into main index.html page ( which takes
<
div> tag to display in it's body of the page.)
<link rel="stylesheet" type="text/css" href="./external/Editor-1.6.1/css/editor.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-9 panel">
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
Customer Master List
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table id="customer_table" width="100%" cellspacing="0" class="table table-striped table-bordered table-hover lh-datatable">
<thead>
<tr class="success">
<th>Cust_ID_Magento</th>
<th>Cust_ID_Shop</th>
<th>Title_Bill</th>
<th>Cust_Name_Bill</th>
<th>Full_Name_Bill</th>
<th>First_Name_Bill</th>
<th>Last_Name_Bill</th>
<th>Company_Bill</th>
<th>House_Nr_Bill</th>
<th>Street_Bill</th>
<th>Addr_Suffix_Bill</th>
<th>City_Bill</th>
<th>Zip_Code_Bill</th>
<th>Country_Code_Bill</th>
<th>Phone_Bill</th>
<th>Email_Bill</th>
<th>Title_Ship</th>
<th>Cust_Name_Ship</th>
<th>Full_Name_Ship</th>
<th>First_Name_Ship</th>
<th>Last_Name_Ship</th>
<th>Company_Ship</th>
<th>House_Nr_Ship</th>
<th>Street_Ship</th>
<th>Addr_Suffix_Ship</th>
<th>City_Ship</th>
<th>Zip_Code_Ship</th>
<th>Country_Code_Ship</th>
<th>Phone_Ship</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="./external/Editor-1.6.1/js/dataTables.editor.js"></script>
<script defer="defer">
var customer_editor;
$(document).ready(function() {
customer_editor = new $.fn.dataTable.Editor({
table: '#customer_table',
ajax: {
url: "./data/customer_list.json",
async: "true",
dataSrc: "",
dataType: "json",
type: "GET",
data: function(d) {
console.log('customer_editor read complete.');
},
},
i18n : {
edit : {
"title": "Update Customer",
"button" : "Update",
"submit" : "Update"
},
create : {
"title" : "Enter new Customer details",
"button" : "Add"
},
remove : {
"title" : "Delete Customer(s)"
}
},
success: console.log('Editor table complete'),
fields: [
{"name": "Cust_ID_Magento", "label" : "Cust_ID_Magento" },
{"name": "Cust_ID_Shop", "label": "Cust_ID_Shop" },
{"name": "Title_Bill", "label": "Title_Bill" },
{"name": "Cust_Name_Bill", "label": "Cust_Name_Bill" },
{"name": "Full_Name_Bill", "label": "Full_Name_Bill" },
{"name": "First_Name_Bill", "label": "First_Name_Bill" },
{"name": "Last_Name_Bill", "label": "Last_Name_Bill" },
{"name": "Company_Bill", "label": "Company_Bill" },
{"name": "House_Nr_Bill", "label": "House_Nr_Bill" },
{"name": "Street_Bill", "label": "Street_Bill" },
{"name": "Addr_Suffix_Bill", "label": "Addr_Suffix_Bill" },
{"name": "City_Bill", "label": "City_Bill" },
{"name": "Zip_Code_Bill", "label": "Zip_Code_Bill" },
{"name": "Country_Code_Bill", "label": "Country_Code_Bill" },
{"name": "Phone_Bill", "label": "Phone_Bill" },
{"name": "Email_Bill", "label": "Email_Bill" },
{"name": "Title_Ship", "label": "Title_Ship" },
{"name": "Cust_Name_Ship", "label": "Cust_Name_Ship" },
{"name": "Full_Name_Ship", "label": "Full_Name_Ship" },
{"name": "First_Name_Ship", "label": "First_Name_Ship" },
{"name": "Last_Name_Ship", "label": "Last_Name_Ship" },
{"name": "Company_Ship", "label": "Company_Ship" },
{"name": "House_Nr_Ship", "label": "House_Nr_Ship" },
{"name": "Street_Ship", "label": "Street_Ship" },
{"name": "Addr_Suffix_Ship", "label": "Addr_Suffix_Ship" },
{"name": "City_Ship", "label": "City_Ship" },
{"name": "Zip_Code_Ship", "label": "Zip_Code_Ship" },
{"name": "Country_Code_Ship", "label": "Country_Code_Ship" },
{"name": "Phone_Ship", "label": "Phone_Ship" },
],
});
var customer_table = $('#customer_table').DataTable({
dom: "Bfrtip",
info: true,
lengthChange: false,
paging: false,
searching: true,
searchHighlight: true,
serverSide: false,
scrollX: "600px",
scrollY: "700px",
scrollCollapse: true,
success: console.log('customer master'),
select: true,
buttons: [
{extend: 'create', editor: customer_editor},
{extend: 'edit', editor: customer_editor},
{extend: 'remove', editor: customer_editor}
],
ajax: {
url: "./data/customer_list.json",
dataSrc: "",
async: "true",
dataType: "json",
type: "GET",
},
columns: [
{data: "Cust_ID_Magento", className: "" },
{data: "Cust_ID_Shop", className: "" },
{data: "Title_Bill", className: "" },
{data: "Cust_Name_Bill", className: "" },
{data: "Full_Name_Bill", className: "" },
{data: "First_Name_Bill", className: "" },
{data: "Last_Name_Bill", className: "" },
{data: "Company_Bill", className: "" },
{data: "House_Nr_Bill", className: "" },
{data: "Street_Bill", className: "" },
{data: "Addr_Suffix_Bill", className: "" },
{data: "City_Bill", className: "" },
{data: "Zip_Code_Bill", className: "" },
{data: "Country_Code_Bill", className: "" },
{data: "Phone_Bill", className: "" },
{data: "Email_Bill", className: "" },
{data: "Title_Ship", className: "" },
{data: "Cust_Name_Ship", className: "" },
{data: "Full_Name_Ship", className: "" },
{data: "First_Name_Ship", className: "" },
{data: "Last_Name_Ship", className: "" },
{data: "Company_Ship", className: "" },
{data: "House_Nr_Ship", className: "" },
{data: "Street_Ship", className: "" },
{data: "Addr_Suffix_Ship", className: "" },
{data: "City_Ship", className: "" },
{data: "Zip_Code_Ship", className: "" },
{data: "Country_Code_Ship", className: "" },
{data: "Phone_Ship", className: "" },
],
});
$('a.editor_create').on('click', function(e) {
e.preventDefault();
customer_editor.create({
title: 'New Customer',
buttons: 'Add'
});
});
$('#customer_table').on('dblclick', 'tr', function(e) {
e.preventDefault();
customer_editor.edit(this.closest('tr'), {
title: 'Edit this record',
buttons: 'Update'
});
} );
});
</script>
This discussion has been closed.
Answers
I don't immediately see the issue from your code above. Can you link to a page showing the issue please?
Allan
Hi Allan,
It is sitting on my personal desktop at home, I'll be more than happy to share, is there a page that explains how I can share code please? Currently the site link is not visitable from outside.
Thanks,
RG
https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read