Hi,
I have the problem that when I set elements to false:
$.extend($.fn.dataTable.defaults, {
searching: false,
lengthChange: false
});
Then there are still empty divs being created:
Those are the divs that are the containers for search and lengthchange. They are now filling up empty space in height, which makes it ugly. Does anyone know if there is a solution for this?
Thanks, Asa
My table is using an AJAX datasource, and is passing through additional data, coming from some custom filters (date picker, select dropdown etc).
By default, stateSave is just storing column ordering, search text and pagination etc.
How can I add my custom filter values to the saved state and use them on subsequent page loads?
Hi,
I'm using datatable for a internal portal. I have used the datatables CDN to include the JS file. As seen here
<script src="http://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
In the last few months there have been instances where i see some strange sites getting opened when user clicks on datatable links. I initially thought it might be some click bait kind of addin from chrome for the specific user. But as days went on i found many users raising the complaint. When analyzed i found the malicious links are getting invoked through the CDN JS scripts that i have included. Please see screen shots of chrome inspection window
The malicious link http://mutualvehemence.com/rZj9J7NO6HBw4h0f3/7259?_=1542862081322 is invoked from Datatble included through cdn.
I have a valid license for Datatable editor for single site usage so i don't think this is because of license. Please let me know fi anybody else have faced similar issue and how this can be sorted out.
Thanks
Hi Allan,
We encounter a problem when retrieving data with datatables editor when the volume of data is important.
This happens with an application and MySql database in GoDaddy, where the message returned by the server is ERR_EMPTY_RESPONSE.
Same application and database on our local servers do not cause problems.
Could you tell us what can cause this error?
i create to select boxes where people can choice something and then press a "add-button"
var t = $('#sell_list').DataTable();
t.row.add( [
$('#sell_companys').val(),
$('#sell_modells').val(),
'yo',
' <button type="button" OnClick="delete()" class="btn-xs btn-primary"><i class="fa fa-trash"></i></button>'
] ).draw( false );
then a new row added to the table and will be show. this works nice.
i want to create a new button "finish" , when the user click the complete data table content will sent via ajax to a php script, how can i do that ?
In our current project we're creating native web components. Amongst those is a datatable webcomponent, an extremely stripped-down version of which looks like this:
import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-select';
import editor from './editor-datatables/js/dataTables.editor'
class DataTable extends HTMLElement {
/* lots of setup code */
connectedCallback() {
console.log($.fn.dataTable.Editor); // returns undefined
}
}
window.customElements.define('data-table', DataTable);
When we try to to initialize the editor as described in the documentation var editor = new $.fn.dataTable.Editor();, we're getting
Uncaught TypeError: jquery_default.a.fn.dataTable.Editor is not a constructor
Hello I am working on a Project, where I want to change the Shown entries.
First of all my Table starts with 10 shown entries, but I want to change it into 0 -100, because I don’t want the table to be seen from the beginning, I want an option where I can change it from 0 for example in to 10.
I used this CDN:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/b-html5-1.5.4/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/b-html5-1.5.4/datatables.min.js"></script>
$(document).ready( function () {
$('#table_id').DataTable();
} );
Can someone help be out?
Or is there an Option to hide the table and let it been shown later per click?
I have a requirement to search on a specific column for a value within a range. The data within the column is typically of the format 617006, 630002, 753000-753025, 751001, 752001-752003, 755000, 755010 - 755020
In the example above, the user has to be able to search, using the datatables search box, for 753005. I have tried defining my own extension to the search
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex, row, counter) {
console.log(“In extended search function”);
var codes = data[5];
var sSearch = settings.oPreviousSearch.sSearch;
if (codes.includes(sSearch)) {
return true;
}
// check ranges and return true else return false
return isInRange(sSearch, codes);
}
);
If I try to search for 753005 the function is never called, it seems to be called on initialisation or when the global search finds a value. I would like the extension search to be called after the global search to check to see if the value is within one of the ranges.
I tried using (note: code removed)
$.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) {
console.log("In afnFiltering pushed function");
return true;
}
);
However this has the same behaviour as the search push function.
I have also tried creating a custom type, fmscode, for the column but this is only called on initialisation, never on search and only contains the column data with no extra parameter to get the string to be searched for.
$.fn.DataTable.ext.type.search.fmscode = function (data) {
console.log("In $.fn.DataTable.ext.type.search.fmscode");
return isInRange(data, codes);
};
$('#aTable).DataTable({
"paging": false,
"columnDefs": [
{ "type": "fmscode", "targets": 5, "searchable": true, "orderable": false }
]
});
I had thought about a hidden column that contained only the values within each range but this could become messy as the ranges can be large.
Does anyone know of a way to achieve this type of search?
Thanks
Hi,
In the jsfiddle http://jsfiddle.net/SuiteProG/9wypaern/23/ I use colreorder and responsive with 17 columns.
When I want order columns with colreorder.order, one column appear 2 times like a screen.
Does anyone have an explanation to this ?
Thanks
Hello everyone;
I want to add fixed header and footer like this link (https://datatables.net/extensions/fixedheader/examples/options/header_footer.html) . I implement all steps, but header/footer cannot be fixed. Any suggestions?
I added this code
$(document).ready(function() {
var table = $('#example').DataTable( {
fixedHeader: {
header: true,
footer: true
}
} );
} )
I added this script
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js
https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css
I have a page that uses multiple tables and some of those tables have the ability to edit rows. So when I am updating a row on a certain table, it is actually updating all the tables. Yes, there is a chance that tables have the same data in them.
I have a method that basically checks which table is open and returns that instance of the table that needs to be updated, example below
$('#mydevicesTabContent .tab-pane.active').attr('id') == "alldevices") {
currentOptionOpened = null;
optionUpdatedFlag = false;
return allDevicesTable;
The line of code i have to update the table is below:
updateTable.row($('#mydevicesTabContent div.active #' + rows[i].DT_RowId)).data(rows[i]);
the object rows is the data of the rows that need to updated.
rows = updateTable.rows().data();
or
rows = updateTable.rows('.selected').data();
This above code actually updates all the tables that I have, which is not the result I expect. Is there another way to edit rows?
Thanks
I am using datatables with asp.net (c#) that's getting data from an SQL server. It works fine when my method is called from the page load event in c#. However, I don't want it to load when the page loads. I want the query to run when I click a button. How should I do this? I have tried executing javascript when button is clicked and then calling method but it doesn't load the style - just the table.
Thanks
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
}
else
{
DataTable(); // I don't want to do this. I want it to populate when button is clicked, and it does, but the style is //missing!
}
}
public void DataTable()
{
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("select * from [table]", con))
{
cmd.Parameters.AddWithValue("@AccountNumber", txtSearchKeyword.Text);
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
cmd.CommandType = CommandType.Text;
DataTable dt = new DataTable();
sda.Fill(dt);
tblAccount.DataSource = dt;
tblAccount.DataBind();
}
}
}
}
And here is my javascript:
$(function () {
$('[id*=tblAccount]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": false,
"sPaginationType": "full_numbers"
});
});
Front End:
<asp:GridView ID="tblAccount" runat="server" AutoGenerateColumns="false" CssClass="table-hover">
<Columns>
<asp:BoundField DataField="CompanyName" HeaderText="Company Name" />
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="Address" HeaderText="Company Address" />
</Columns>
</asp:GridView>
I have a simple implementation of DataTables with Bootstrap 4, for example at medieval-inquisition.huma-num.fr/MS609/list.
After much research I am not able to resolve two visual issues:
(BTW I mention and link DataTables in the "about" page of the site - I appreciate this product a lot!)
I want to join the two codes but it does not work, you can help me?
$(document).ready(function() {
$('#tabla').DataTable( {
"language": {
"lengthMenu":"Mostrar MENU registros por página.",
"search" : "Buscar",
"zeroRecords": "Lo sentimos. No se encontraron registros.",
"info": "Mostrando página PAGE de PAGES",
"infoEmpty": "No hay registros aún.",
"infoFiltered": "(filtrados de un total de MAX registros)",
"LoadingRecords": "Cargando ...",
"Processing": "Procesando...",
"SearchPlaceholder": "Comience a teclear...",
"paginate": {
"previous": "Anterior",
"next": "Siguiente",
}
},
"sort": false
} );
} );
AND
$(function () {
if ($('.dataTable').length > 0) {
$('.dataTable').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosorting']
}],
});
$(document).on('keyup', "input[type='number']", function(){
var oTable = $('.dataTable').dataTable();
oTable.fnFilter($(this).val());
});
$('.dataTables_filter').empty(); // clears the content generated
$('.dataTables_filter').append("
")
}
});
I noticed that the nightly version of buttons.html5.min.js now includes an autoFilter for Excel exports. Unfortunately this hangs any spreadsheet that's created from the button when the A to Z (or Z to A) sort is selected from the filter. The filtering itself works fine.
Does anyone know how to fix this or at least remove the filter before export? This would be a nice feature if it worked!
I've had to revert back to the published version 1.53 for the buttons to remove the filter.
Regards
mikeg
just purchased editor, but am not seeing my license key anywhere
I would like to highlight/select the option in the drop-down list to match the value already returned in the column. I have not been successful in getting def to work. Should it be a placeholder?
fields: [
{
label: "RATINGCODE",
name: "RATINGCODE",
type: "select",
options: [
<cfoutput query="codes">
{ label: "#codes.ratingcode#", value: "#codes.ratingcodeid#"},
</cfoutput>
]
}
Has anyone had success with a rich text editor in their text field and/or a way to set the field to html?
There is an issue with the interaction between Scroller and the displayStart option. The following example shows this in action.
http://live.datatables.net/banimosa/1/edit
The correct records will be loaded, but the Scroller does not modify its initial scroll position to reflect this leaving an empty viewport into the table.
I have also attached a simple patch that remedies this by propogating the displayStart value to the Scroller's 'topRowFloat' value on construct, allowing the scroll position to initialise to the correct position.
Hi,
I use datatables (version 1.10.16) and try to set the assets in French using the Internationalisation plugins.
So on datatable init, i set:
"language": {
"url": "../../global/language/French.json"
}
which is my local translation file. I first used the content of
//cdn.datatables.net/plug-ins/1.10.19/i18n/French.json
that is to say copied the content to my French.json file
Then it don't works, and i see English language on Datatables. If i remove
"select": {
"rows": {
_: "%d lignes séléctionnées",
0: "Aucune ligne séléctionnée",
1: "1 ligne séléctionnée"
}
}
everything is working fine (except the select rows string of course).
And if i set all this parameters directly on js file, including the select rows, everythings is also working fine (including the select rows string).
Note i also tried with new parameters names, and everythings is working fine if not using language.url
"language": {
"processing": "Traitement en cours...",
"search": "Rechercher :",
"lengthMenu": "Afficher MENU éléments",
"info": "Affichage de l'élement START à END sur TOTAL éléments",
"infoEmpty": "Affichage de l'élement 0 à 0 sur 0 éléments",
"infoFiltered": "(filtré de MAX éléments au total)",
"infoPostFix": "",
"loadingRecords": "Chargement en cours...",
"zeroRecords": "Aucun élément à afficher",
"emptyTable": "Aucune donnée disponible dans le tableau",
"paginate": {
"first": "Premier",
"previous": "Précédent",
"next": "Suivant",
"last": "Dernier"
},
"aria": {
"sortAscending": ": activer pour trier la colonne par ordre croissant",
"sortDescending": ": activer pour trier la colonne par ordre décroissant"
},
"select": {
"rows": {
_: "%d lignes séléctionnées",
0: "Aucune ligne séléctionnée",
1: "1 ligne séléctionnée"
}
}
},
Do you know what's happening ?
Regards,
Thomas