datatables bootstrap modal not working - javascript

I am trying to get a click to open editable content of my dyniamically generated rows in modals, using datatables plugin.
I see an error:
Uncaught TypeError: Cannot read property 'display' of undefined.
I am using the following files apart from jquery and bootstrap.min.js:
<!-- Datatables -> these files are required to make the table headers fixed, sortable etc-->
<link href="../../../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
My code where I initialize my datatable looks like this:
dtEdit = $('#edit-element').DataTable({
"paging": false,
"info": false,
"bFilter": false,
"bPaginate": false,
retrieve: true,
"processing": true,
columns: [{
'data': 'status'
},
{
'data': '_id'
},
{
'data': 'email'
},
{
'data': 'role'
},
],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0]+' '+data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}
});
Any pointers please?
P.S. -> I am trying to achieve something like this:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

To fulfill your requirement you should follow the given steps.
1. $(document).ready(function () );i.e. Use jquery DOM when the document is ready.
2. $('.my_button').click(function () );i.e. When you click your button modal should be loaded.
3. $('#mydatatable').DataTable(); i.e. Load the datatable at last inside the body of $(document).ready(function ());
$(document).ready(function ()
{
//When the button is clicked
$('.my_button').click(function () {
//Your code for modal
});<br>
$('#mydatatable').DataTable();
});

Related

How to use Tabulator JavaScript library in observablehg?

I would like to use the Tabulator JavaScript library as part of an observablehq notebook, but for some reason I can't make it work. Below is an example. Works fine in browser, but I could not make it work in observablehq. Here is my naive attempt at observablehq. I also tried to load the css and JavaScript urls using require, but to no avail.
<html>
<script src="https://unpkg.com/tabulator-tables#5.3.0/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#5.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="table"></div>`
<script>
var tableData = [
{name:"Bob"},
{name:"Steve"},
{name:"Jim"},
]
//Example Table
var table = new Tabulator("#table", {
data:tableData, //load data into table
height:200, //enable the virtual DOM
columns:[
{title:"Name", field:"name", width:200, editor:"input"},
]
});
</script>
</html>
Here's an example https://observablehq.com/#fil/hello-tabulator
you can use, in different cells:
Tabulator = require("tabulator-tables#5")
to load the library
#import url("https://unpkg.com/tabulator-tables#5/dist/css/tabulator.min.css")
to load the css
And, finally:
viewof t = {
const data = penguins;
const table = new Tabulator(document.createElement("DIV"), {
data,
height: 400,
layout: "fitColumns",
autoColumns: true,
autoColumnsDefinitions: (columns) =>
columns.map((d) => ({ ...d, editor: true })),
editor: true,
pagination: "local"
});
table.element.value = data;
table.on("dataChanged", (data) => {
table.element.value = data;
table.element.dispatchEvent(new CustomEvent("input"));
});
return table.element;
}

jQuery QueryBuilder : how to initialize it and set the read-only parameter

I am using jQuery QueryBuilder plugin. I initiated my queryBuilder then used SQL Parser to set a rule from SQL.
After, I want to set my queryBuilder to read-only which means the queryBuilder will be disabled. You won't be able to add other rules or change the current rule.
Based on documentation, it should be as this but couldn't make it work.
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"] });
Any suggestions please what am I doing wrong ? Thank you very much.
$(document).ready(function() {
$('#queryBuilder').queryBuilder({
filters: [
{ id: 'name',
label: 'Name',
type: 'string',
value_separator: ',',
operators: ['in']
}
]
});
// here I set the rule from sql query without ready only feature and it works fine
$('#queryBuilder').queryBuilder('setRulesFromSQL', "name in ('Alex','Adam')");
//Here I want to update the previous method to include read only feature.
//There will be only that rule and you can't change it.
//I couldn't make it work although I believe I did write the correct syntax
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/css/query-builder.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>
<div id="queryBuilder"></div>
Flags at rule level works for me
https://querybuilder.js.org/#methods
Hopes that helps

Tagify - show suggestions on focus not working

In an asp.net Core web application I'm using the Tagify component (Tagify home page & examples) for showing tags in input and textarea controls. Following an example from the link (see under: Same using custom suggestions) I have the following code:
<div class="col-auto" title="Start typing to show available tags ...">
<textarea name="tbSearch2" placeholder="Filter by tags" id="tbSearch2" class="form-control email-filter" rows="1"></textarea>
</div>
and javascript (ajax executes only once -> on page load):
var tagslist = '';
$.ajax({
'url': "Email/GetTags",
'success': function (data) {
tagslist = data;
// load tags for searching
var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
tagTextProp: 'name',
enforceWhitelist: true,
delimiters: null,
whitelist: tagslist,
editTags: false,
dropdown: {
mapValueTo: 'name',
searchKeys: ['name'],
maxItems: 20, // <- maximum allowed rendered suggestions
classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
},
});
}
});
The tags work, but only when the user starts typing some text into the textarea. The dropdown does not appear immediately when Tagify control has focus (as in the example in the link in the beginning of this post).
Any ideas what I'm doing wrong?
*note: there are no errors in the browser console.
You can try to check the versions of tagifycss and js, Here is a working demo:
GetTags action:
public List<string> GetTags()
{
return new List<string>{ "A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript"};
}
js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
var tagslist = '';
$(function () {
$.ajax({
'url': "GetTags",
'success': function (data) {
tagslist = data;
// load tags for searching
var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
tagTextProp: 'name',
enforceWhitelist: true,
delimiters: null,
whitelist: tagslist,
editTags: false,
dropdown: {
mapValueTo: 'name',
searchKeys: ['name'],
maxItems: 20, // <- maximum allowed rendered suggestions
classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
},
});
}
});
})
</script>
result:

Datatable Lazy loading not working

I have been trying to use lazy loading feature of datatable, but it's loading all the data at once, I'm not able to figure it out, what's going wrong.
var dataTable = dataTable || {};
dataTable = (function(namespace) {
var api = "https://jsonplaceholder.typicode.com/photos";
namespace.drawDataTable = function() {
try {
$('#table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": api,
"dataSrc": ""
},
"columns": [{
"mData": "thumbnailUrl"
},
{
"mData": "albumId"
},
{
"mData": "id"
},
{
"mData": "title"
},
// { "mData": "url" }
],
"scrollY": 200,
"scroller": {
loadingIndicator: true
}
});
} catch (e) {
console.error(e.message);
}
}
return namespace;
}(dataTable = dataTable || {}));
$(document).ready(function() {
dataTable.drawDataTable()
})
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="table">
<thead>
<tr>
<th>thumbnailUrl</th>
<th>albumId</th>
<th>id</th>
<th>title</th>
<!-- <th>url</th> -->
</tr>
</thead>
</table>
I have Tried these question already.
Lazy loading of table rows in Jquery datatables 1.10.10?
DataTables: Cannot read property 'length' of undefined
For loading data in chunks you need to write server-side script preferably using helper class SSP (ssp.class.php) available in DataTables distribution. That way data will be returned in chunks and consumed by front-end DataTables plug-in.
Your link https://jsonplaceholder.typicode.com/photos returns all records at once and DataTables front-end plug-in is unable to extract portion of it and still have to download the whole JSON file.
See Server-side processing for more details on what data needs to be returned in order for lazy loading to work.

Buttons and pagination in datatables is showing incorrectly

I am using to use Datatables to display reports and records. But I am having an issue where the file export buttons and the pagination at the bottom are only showing as links not as buttons.
Here is a screenshot of my screen
This is what I have loaded in my page
<link href="/Vendor/bootstrap/v3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/bootstrap/v3.3.6/js/bootstrap.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/js/jquery.dataTables.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/extensions/Buttons/css/buttons.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.flash.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/JSZip/jszip.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/pdfmake.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/vfs_fonts.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.print.min.js"></script>
Note, that I only want to use the datatable with bootstrap style.
Here is the code that I use to setup the datatable.
$('#reportTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
columns: [
{ data: 'Category', title: 'Category' },
{ data: 'Svp', title: 'SVP' },
{ data: 'Rvp', title: 'RVP' },
{ data: 'Division', title: 'Division' },
{ data: 'ContactType', title: 'Contact Type' },
{ data: 'TotalRecords', title: 'Total Records' },
]
});
What am I missing here? How can I fix this issue
UPDATED
I fixed the Export buttons but including the following file
Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.bootstrap.min.js
The only open issue now is the pages at the bottom
You are missing the dataTables.bootstrap.min.js script file include. If you downloaded these files from the official DataTables download page and the file path of the other files can be extrapolated to this one, I'd take a look and see if it exists here:
Vendor/datatables/v1.10.12/js/dataTables.boostrap.min.js
If it doesn't you may have to go back to the download page and make sure you get this script file.

Categories