I'm completely new to web development and I'm working on Tutorial to get into it...
I'm having some troubles implementing jquery.Datatables. The controls are not displayed correctly:
What could that be? I've installed DataTables version 1.10.15 through package manager. I've never changed anything in the CSS....
Thank You for your help
I'm pilot testing datatables for my company, and I'm able to run the editor/node.js example with mysql running locally on my machine. All the examples run just fine at https://localhost:8081/examples.
All things being equal, i modify the db.js file to say the following:
let knex = require('knex');
module.exports = knex({
client: 'oracledb',
connection: {
host: 'oracledev',
user: 'test',
password: 'test',
database: 'orcl'
}
});
And then attempt to run the example with npm start and i get the following output
DataTables Editor demo - navigate to http://localhost:8081/
TypeError: Cannot read property 'replace' of undefined
the line that comes back right after the server starts is TypeError: Cannot read property 'replace' of undefined And the source of that error i'm finding is very difficult to track down.
Please advise!
Hi,
I'm having an issue
I have a lot of columns let say 15
I'm using responsive
I'm using savestate
When using the main search let say I search for John
Then I go to another page and get back, the result is ok and still there
Now if I clear the search field
Then the columns are not well aligned they are a little bit outside the template
If refresh the page this is ok.
This occurred only if I quit and get back and clear the search value.
It does not occurred if I don't quit the page.
The only solution I have for now is to reload the page on clear search
but I'm wondering if someone have encounter this and have a solution for this.
I would like you to click on a search field of the table, select the value that you entered. the same thing that does when pressing double click
I tried this but it does not work
function selected(){ //Selecciona un campo con un solo click
$("input[type='text']").off("click");
$("input[type='text']").on("click", function () {
$(this).select();
});
$("input[type='search']").off("click");
$("input[type='search']").on("click", function () {
$(this).select();
});
$("input[type='number']").off("click");
$("input[type='number']").on("click", function () {
$(this).select();
});
}
Hello,
i have the requirement to use DataTables without server side scripts.
A Dataset is fetched over PDO and stored in an array.
The content of this array should be processed and modified by PHP. Even new records can be added.
Afterwards the user can modify and add these records. I would prefer some kind of "inline editing".
Then the records should be processed again by PHP and written to (/inserted into /updated in) the database using PDO.
This an example of how the array could look like. Adding new fields to process the array wouldn't be a problem.
For new inserted records negative RowIDs would be possible or any other form of data type. I'm very flexible at this point so it shouldn't be a big of a problem.
The user should be able to edit each field and add new records.
Can you provide an example how this requirement can be accomplished using DataTables?
{
"data": [
{
"RowId": "1",
"first_name": "John",
"last_name": "Miller",
"email": "John.Miller@office.net",
"age": "61"
},
{
"RowId": "2",
"first_name": "Peter",
"last_name": "Wulf",
"email": "Peterg.Wulf@office.net",
"age": "63"
}
]
}
regards,
Kostas
Hi,
I'm looking for a snippet to time the table loading ..
using "deferRender": true, seems to take longer to load than "deferRender": false,
At the moment I'm timing the overall page load,
so I'd'like to use a snippet to get only the table load part to have a better precise result.
Thanks
I propose a discussion posted by gaspare.licari in April 2016 but it is still valid now:
"Using:
render: $.fn.dataTable.render.number( ',', '.', 2, '€ ' )
the numeric values with decimals are always displayed with decimal part as zero, even if the values is stored correctly into the Database.
For example if I edit 1.52, it's displayed as 1.00 and stored into Database as 1.52.
How can I fix it?".
Thanks,
Giuseppe
I believe i solved the problem with printing with row grouping. I found a snippet of code on StackOverflow here and was able to fix it up to work with row grouping. This is placed in datatable-buttons.js on line 1564.
Heres some images of it working!
http://prntscr.com/fhx1vu
http://prntscr.com/fhx1ia
var _exportData = function ( dt, inOpts )
{
var config = $.extend( true, {}, {
rows: null,
columns: '',
grouped_array_index: [],
modifier: {
search: 'applied',
order: 'applied'
},
orthogonal: 'display',
stripHtml: true,
stripNewlines: true,
decodeEntities: true,
trim: true,
format: {
header: function ( d ) {
return strip( d );
},
footer: function ( d ) {
return strip( d );
},
body: function ( d ) {
return strip( d );
}
}
}, inOpts );
var strip = function ( str ) {
if ( typeof str !== 'string' ) {
return str;
}
// Always remove script tags
str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
if ( config.stripHtml ) {
str = str.replace( /<[^>]*>/g, '' );
}
if ( config.trim ) {
str = str.replace( /^\s+|\s+$/g, '' );
}
if ( config.stripNewlines ) {
str = str.replace( /\n/g, ' ' );
}
if ( config.decodeEntities ) {
_exportTextarea.innerHTML = str;
str = _exportTextarea.value;
}
return str;
};
var header = dt.columns( config.columns ).indexes().map( function (idx) {
var el = dt.column( idx ).header();
return config.format.header( el.innerHTML, idx, el );
} ).toArray();
var footer = dt.table().footer() ?
dt.columns( config.columns ).indexes().map( function (idx) {
var el = dt.column( idx ).footer();
return config.format.footer( el ? el.innerHTML : '', idx, el );
} ).toArray() :
null;
var rowIndexes = dt.rows( config.rows, config.modifier ).indexes().toArray();
var selectedCells = dt.cells( rowIndexes, config.columns );
var cells = selectedCells
.render( config.orthogonal )
.toArray();
var cellNodes = selectedCells
.nodes()
.toArray();
var grouped_array_index = config.grouped_array_index; //customised
var no_of_columns = header.length;
var no_of_rows = no_of_columns > 0 ? cells.length / no_of_columns : 0;
var body = new Array( no_of_rows );
var body_data = new Array( no_of_rows ); //customised
var body_with_nodes = new Array( no_of_rows ); //customised
var body_with_nodes_static = new Array( no_of_rows ); //customised
var cellCounter = 0;
for (var i = 0, ien = no_of_rows; i < ien; i++)
{
var rows = new Array( no_of_columns );
var rows_with_nodes = new Array( no_of_columns );
for ( var j=0 ; j<no_of_columns ; j++ )
{
rows[j] = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
rows_with_nodes[j] = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
cellCounter++;
}
body[i] = rows;
body_data[i] = rows;
body_with_nodes[i] = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
body_with_nodes_static[i] = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
}
/******************************************** GROUP DATA *****************************************************/
var row_array = dt.rows().nodes();
var row_data_array = dt.rows().data();
var iColspan = no_of_columns;
var sLastGroup = "";
var inner_html = '',
grouped_index;
var individual_group_array = [],
sub_group_array = [],
total_group_array = [];
var no_of_splices = 0; //to keep track of no of element insertion into the array as index changes after splicing one element
for (var i = 0, row_length = body_with_nodes.length; i < row_length; i++)
{
sub_group_array[i] = [];
individual_group_array[i] = [];
var sGroup = '';
for(var k = 0; k < grouped_array_index.length; k++)
{
sGroup = row_data_array[i][grouped_array_index[k]];
inner_html = row_data_array[i][grouped_array_index[k]];
grouped_index = k;
individual_group_array[i][k] = row_data_array[i][grouped_array_index[k]];
sub_group_array[i][k] = sGroup;
}
total_group_array[i] = sGroup;
console.log("grouped_index",grouped_index);
if ( sGroup !== sLastGroup )
{
var table_data = [];
var table_data_with_node = '';
for(var $column_index = 0;$column_index < iColspan;$column_index++)
{
if($column_index === 0)
{
table_data_with_node += '<td style="border-left:none;border-right:none">'+inner_html+'</td>';
table_data[$column_index] = inner_html + " ";
}
else
{
table_data_with_node += '<td style="border-left:none;border-right:none"></td>';
table_data[$column_index] = '';
}
}
body_with_nodes.splice(i + no_of_splices, 0, $.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
body_data.splice(i + no_of_splices, 0, table_data);
no_of_splices++;
sLastGroup = sGroup;
}
}
return {
header: header,
footer: footer,
body: body_data
};
};
Usage:
Define grouped_array_index in exportOptions
exportOptions: {
// Any other settings used
grouped_array_index: [<place row to use here>],
},
I'll work on examples shortly
var table = $('#PositionRankings').DataTable({
"paging": true,
"pageLength":10,
"pagingType":"simple",
"info": false,
"scrollX": true,
"scrollCollapse": true,
"order": [7, 'desc' ],
dom: 'Bfrtip',
buttons: [ ]
});
I have that table on this page: https://www.topflightfantasysports.com/fanduel-nba-optimizer/
Its using Pagination. The first column of this table is a checkbox, when the user hits the "Create Lineups" button at the bottom, I need to cycle through the table and find all the checkboxes that are checked yes. However my code only finds the ones that are currently showing and not the paginated rows that are hidden currently.
$checkboxLock = $('.Locked:checkbox:checked');
var LockArray = '';
LockArray = $.map($checkboxLock, function(el){
if(el.checked) {
return '"' + el.id + '"';
} else {
};
});
//alert(LockArray);
console.log(LockArray);
That's my current code to find them. If I view page source all the records are showing in the actual source. So I just need to know how to find the value of all the rows, not just the ones showing for my first column.
Utter and complete novice to Datatables and jQuery...but I gotta maintain app, so please bear with my ignorance.
I have a data table in an iframe. When the user uses the widget (I have no idea what the official name of this widget is) that allows the user to select the number of rows to display, I want to resize that iframe to fit based on the number of rows selected.
Code that fires when I select a new table size from the widget:
$('#matchingPersonsTable').on('length.dt', function (e, settings, len) {
console.log('New page length: ' + len);
parent.iframeLoaded('matchQueue');
});
The source for the iframeLoaded method:
function iframeLoaded(elementId) {
console.log('In iframeLoaded')
var iFrameID = document.getElementById(elementId);
if (iFrameID) {
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 25 + "px";
}
}
It appears that the method for resizing the iframe is being called before the data table finishes its resize, as the first time I select the resize widget the table changes size but the iframe does not....but if I choose a smaller size a second time, the iframe DOES resize. If I then choose the size I originally chose, it fits perfectly.
What am I doing wrong???
Second question....when the function to resize the iframe gets called, once all the javascript has completed, I get the following error in Chrome's dev tools console:
jquery-2.0.3.min.js:4 Uncaught TypeError: e.getAttribute is not a function
at Function.ot.attr (jquery-2.0.3.min.js:4)
at Array.<anonymous> (jquery-2.0.3.min.js:4)
at jquery-2.0.3.min.js:4
at a (jquery-2.0.3.min.js:4)
at kt (jquery-2.0.3.min.js:4)
at Function.ot [as find] (jquery-2.0.3.min.js:4)
at HTMLDocument.handlers (jquery-2.0.3.min.js:5)
at HTMLDocument.dispatch (jquery-2.0.3.min.js:5)
at HTMLDocument.y.handle (jquery-2.0.3.min.js:5)
at Object.trigger (jquery-2.0.3.min.js:5)
What is up with this?!?!
By default the table gets blurred when clicked outside but headings (for sorting), buttons, pagination, etc. are not affected and the table has still a focus.
Is there an option like a selector to take that elements also into account?
Rows with a specific class (or row indexes) should be ignored by the search and remain visible although the search term does not fit. My use case is that new rows are added dynamically and therefore some columns are not filled yet and so they are currently hidden because of an existing search.
I tried it with $.fn.dataTable.ext.search.push(...) but this is just an additional search filter.
Is there an option for this requirement or can I override the default behavior in some way?
I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. I have installed DataTables 1.10.18, and Select 1.2.6.
I have the following component.html code, showing only the sa-datatables plugin usage"
<sa-datatable
[options]="{
data: sysMsgs,
columns: [
{data: 'checked'},
{data: 'rowid'},
{data: 'senderID'},
{data: 'message'},
{data: 'dateCreated'}
],
buttons: [ 'copy', 'csv', 'pdf', 'print',
{
extend: 'selected',
text: 'Delete',
action: handleDelete()
}
],
columnDefs: [
{
targets: 0,
orderable: false,
className: 'select-checkbox'
},
{
targets: [2],
visible: true
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]],
searching: true,
search: {
smart: false
}
}"
tableClass="table table-striped table-bordered table-hover">
<thead>
<tr>
<th data-hide="mobile-p">Select</th>
<th data-hide="mobile-p">ID</th>
<th data-hide="mobile-p">Sender</th>
<th data-hide="mobile-p">Message</th>
<th data-hide="mobile-p">Date Sent</th>
</tr>
</thead>
</sa-datatable>
The datatable that is created works fine. I get the checkboxes, and the Delete button does call function handleDelete(). My problem is not knowing how to pass, or get, the selected rows in the handleDelete() function, which I have defined in component.ts.
The DataTables Editor has a Soft Delete example, using jQuery that defines the selected rows like this:
var rows = table.rows( {selected: true} ).indexes();
I have tried modifying the sa-datatable, like so:
<sa-datatable id='table' name='table'
[options]="{
...
action: handleDelete(table.rows( {selected: true} ).indexes())
...
</sa-datatable>
but, it generates a compile error because table is undefined.
Any ideas on how to get a list of selected rows in component.ts?
Thanks,
Bob
I need to pass Authorization header token with ajax call below is code I am trying
sServerMethod: 'post',
"ajax": {
"url": 'http://localhost:111111/api/Support/GetAllTickets',
"dataType": 'json',
"type": 'Post',
"beforeSend": function (xhr) {
xhr.setRequestHeader('Authorization',
"Bearer " + sessionStorage.getItem('accesstoken'));
},
"fnServerParams": function (aoData) {
aoData.push({ "name": "sdisp", "value": selectedval });
aoData.push({ "name": "ticketbystatus", "value": typeofticket });
},
},
this is reaching to web API but parameters is not passed.
Please help
I try to use datatable with server side option, but i init table with some value;
Js part
var url = 'http://www.json-generator.com/api/json/get/bXZCNjxHCa?indent=4';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
"deferLoading": 50,
'ajax': {
'url': url
}
});
Gone an example here
jsfiddle.net/0hczmLxb/
Actually my init data is displayed but when i try to go on next page, I see processing who is displayed... but new data is never displayed.
I'm currently implementing DataTables Server-Side in a project using Angular as the front-end framework and Laravel as the Back-end framework.
When rendering the datatable, all data is displayed correctly and both the client's request and the server's response are ok, the only issue is I keep getting a row at the last position of each page saying "No matching records found" even though data is displayed correctly on each page.
My client side code is the following:
The client request is sent as follows:
The server response is received as follows:
The data renders as follows (I'm showing page #2 for img size purposes):
Hi!
I try to add a onclick event attribute to all <a> tags with the class "ocond" in a td.
so instead of giving the onClick event to the td like this:
$(td).attr('onClick', "saveToDatabase3(this,'pricechange','"+ rowData.price +"','"+ rowData.checkboxes +"')");
I try to give it to all <a> tags with class "ocond" within the td. I tried it with:
$(td + " a.ocond").attr('onClick', "saveToDatabase3(this,'pricechange','"+ rowData.price +"','"+ rowData.checkboxes +"')");
but I had no success. Thank you in advance for any help!
best greetings
Hi,
I am new to DataTables and I am trying to discover the details of that issue.I have a table that ı am getting the data's of the tables rows from database.I can list the datas in row with using DataTables but I want to get datas from selected row when i click on the row and use that datas for editing,deleting,etc.
I have added my code snippet below my message.How can i do that?Can you help me please?
MY CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AdminLogin</title>
<!-- Bootstrap -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<link href="Content/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="Content/jquery.dataTables.min.css" rel="stylesheet" />
<link href="Content/select.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<p><br/></p>
<form id="form1" runat="server">
<div class="container">
<div class="jumbotron">
<h5>Hello <asp:Label ID="lblUser" runat="server" ForeColor="Red"/> </h5>
<h5><asp:LinkButton ID="btnLogOut" runat="server" ForeColor="Red" CssClass="pull-right" OnClick="btnLogOut_Click"
Font-Underline="True">Log Out</asp:LinkButton> </h5>
<h1>Kullanıcılar</h1>
</div>
<h1>User List</h1>
<asp:Repeater ID="rptUsers" runat="server">
<HeaderTemplate>
<table class="table table-striped table-bordered table-hover" id="UserList">
<thead>
<tr>
<th>User Name</th>
<th>IsAdmin</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text='<%# Eval("UserName~~~~") %>' />
</td>
<td>
<asp:Label ID="lblAdmin" runat="server" Text='<%# Eval("IsAdmin") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="scripts/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/jquery.dataTables.min.js"></script>
<script src="scripts/dataTables.bootstrap.min.js"></script>
<script src="scripts/dataTables.select.min.js"></script>
<script>
$(document).ready(function () {
$('#UserList').DataTable({
"aLengthMenu": [[4, 8, 12, -1], [4, 8, 12, "All"]],
"iDisplayLength": 4,
select: {
style: 'single'
}
});
});
</script>
</form>
</body>
</html>
Hello,
i've got a problem with a "table.row.data()" content in a table i build dynamically.
I've tried to made an example here: http://jsfiddle.net/ps4bvmq5/
First of all:
It's not possible to change the way the table are populated. So i've to keep this piece of code.
Problem:
Change list select to "list 1".
Drag and Drop one of the rows.
An alert will show you a table.row.data() content.
It's ok.
Now change the list in the select (list 2) and drag and drop one of the row again....
Now, table.row.data() in undefined.
That's the problem.
It seems like the first one table init it's going ok and the others ones no.
What i'm wrong?
Thanks in advance
PS: never mind about other errors it's about jsfiddle config.