Hello,
If i were to add a rangle slider , how can i use the inbuilt sort function to make the slider sort the datatables?
Any help would be appreciated ^^
↧
how to use inbuilt sort function in new datatables version?
↧
Inline Editor UploadMany Delete Button Not Working?
I have an UploadMany that doesn't appear to fire a callback thru AJAX when an item is "Deleted" (X clicked on the right):
editor = new $.fn.dataTable.Editor(
{
ajax: {
data:
function(d) {
d.DT_RowID = editor.ids();
},
type: "POST",
url: "/AudioClips/Edit"
},
idSrc: "id",
table: "#Table_be6112dc6271436db5230ee7143273b7",
fields: [
{
name: "name",
label: "Name"
},
{
name: "clips",
label: "Audio Clip",
type: "uploadMany",
noFileText: "No Clips Uploaded.",
display: function (file)
{
if(file.fullyQualifiedID)
return '<audio controls src="/AudioClips/Clip/?source=' + file.fullyQualifiedID + '" />';
else
return '<audio controls src="/AudioClips/Clip/?source=' + editor.ids() + '_' + file + '" />';
}
}
]
} );
$('#Table_be6112dc6271436db5230ee7143273b7').on('click', 'tbody td.dt-editable', function (e)
{
editor.inline(this);
} );
var dataTable = $("#Table_be6112dc6271436db5230ee7143273b7").DataTable(
{
processing: true,
serverSide: true,
filter: true,
order: [0, 'asc'],
orderMulti: false,
ajax: {
url: "/AudioClips/Items?id=2dac5d78-3373-47cf-815a-4cd8e9b78c3e",
type: "POST",
datatype: "json"
},
columns: [
{
className: "dt-editable",
data: "name",
name: "Name",
autoWidth: true
},
{
className: "dt-editable",
data: "clips",
name: "Audio Clip",
render: function (d)
{
if (d.length)
{
return "<button class=\"btn btn-sm btn-outline-secondary dt-editable\">" + d.length + " Clips</button>";
}
return "No Clips Uploaded.";
},
autoWidth: true,
},
{
data: "hasChildren",
name: "Is Variable?",
autoWidth: true
},
{
data: "id",
orderable: false,
render: function (data, type, row, meta)
{
return '<button class=\"btn btn-sm btn-outline-success Table_be6112dc6271436db5230ee7143273b7-details\">Details</Button> <button class="btn btn-sm btn-outline-danger" onclick="DeleteAudioClip(\''+data+'\');">Delete</button>';
}
}]
});
I'm getting not JS errors in Chrome and the break-point for the ajax() call in the editor itself is not being hit. I was curious if it was, perhaps, an issue with losing focus (I know that sometimes things don't update until focus is lost), but the break-point is still never hit and the server doesn't seem to get any calls either (from verbose logging).
It's fine if I need to tie into a custom parameter or something -- I just need to know what's up.
↧
↧
Making rows not editable with multi-row edit enabled?
I have the need to prevent some rows from being edited in the DataTables editor. Currently I have a solution implemented that was previously discussed here in another thread. The solutions uses preOpen()to check the contents of the selected row for a condition. This works perfectly when you only select one row to edit.
The issue I'm having is that when multi-row editing is enabled, only the first row selected is checked for the condition. If a row that is not meant to be editable is selected after a row that can be edited is selected, then both rows will be edited.
I don't have much experience with the APIs used in the solution such as modifier() so I am not familiar with how they work. How can the code below be modified to check every row that is selected for editing before opening or locking the form?
editor.on('preOpen', function (e) {
var modifier = editor.modifier(); // Gets the selected row(s) of the table
if (modifier) {
// Get data for this row
var data = table.row(modifier).data();
if (data.not_editable == 1) {
// Disable the form
editor.disable();
// ...
} else {
// Enable the form
editor.enable();
// ...
}
}
});
↧
getting error : A system error has occurred (More information)
When I click more information and follow all what it says I still do not see where the problem is. I have used generator and downloaded, when I click run on generator it is fine, when I download to see locally it doesnt work, I attach screenshot of error. 
↧
File uploaded to a field that does not have upload options configured
Hi, when I'm trying to upload a file I have an error: "File uploaded to a field that does not have upload options configured". Help me please
Controller:
public ActionResult JTovar()
{
var request = System.Web.HttpContext.Current.Request;
var settings = Properties.Settings.Default;
using (var db = new DataTables.Database(settings.Dbtype, settings.DbConnection))
{
var response = new Editor(db, "Tovar", "id")
.Model<ModelTovar>()
.Field(new Field("Tovar.id"))
.MJoin(new MJoin("image")
.Link("Tovar.id", "interImage.idTovar")
.Link("image.id", "interImage.idImage")
.Model<MjoinImageTovar>()
.Field(
new Field("Tovar.Links")
.Upload(
new Upload(request.PhysicalApplicationPath + @"uploads\__ID____EXTN__")
.Db("image", "id", new Dictionary<string, object>
{
{"fileName", Upload.DbType.FileName},
{"fileSize", Upload.DbType.FileSize},
{"webPath", Upload.DbType.WebPath},
{"systemPath", Upload.DbType.SystemPath}
})
.Validator(Validation.FileSize(50000000, "Max file size is 500000K."))
.Validator(Validation.FileExtensions(new[] { "jpg", "png", "gif","html","htm" }, "Please upload an image or html file."))
)
.SetFormatter(Format.NullEmpty())
)
)
.Process(request)
.Data();
return Json(response, JsonRequestBehavior.AllowGet);
}
}
{
label: "Links:",
name: "Tovar.Links",
type: "uploadMany",
display: function (id) {
return '<img src="' + editor.file('image', id).webPath + '"/>';
},
noImageText:'No image'
}
------------------------------------------------------------------------------------------------------
{
data: "Tovar.Links",
render: function (data)
{
console.log(data);
return data?
data.length + ' files(s)' :
'No file';
},
title: "Image"
}
--------------------------------------------------------------------------------------------------------
Models:
public class MjoinImageTovar
{
public class interImage
{
public int id { get; set; }
public int idTovar { get; set; }
public int idImage { get; set; }
}
public class image
{
public int id { get; set; }
public string fileName { get; set; }
public int fileSize { get; set; }
public string webPath { get; set; }
public string systemPath { get; set; }
}
}
public class ModelTovar
{
public class Tovar
{
public int id { get; set; }
public string Links { get; set; }
}
Edited by Allan Formatting using markdown.
↧
↧
Is it possible to fix the buttons, search, paginations, etc. at the header?
I'm trying to figure out if this is possible. When a user scrolls up or down the datatable the following is always visible at the head...
↧
using ajax method... url: "/ajax/arrays.txt" as a server-side?
In his ajax data option example:
http://live.datatables.net/hopepicu/1/edit
Does this example work for both client and server-side?
How is url: "/ajax/arrays.txt" getting the information? Is this snippet tied to a backend somewhere or a separate http: site?
I see if you comment it out and press refresh the table only shows the data (John Smith).
Anyway, I am trying to make my webpage use ajax.reload() but have NO idea where to store a link as a .text file. Webhost won't let me save anything as .text.
Sample project link if needed: https://datatables-ajax.000webhostapp.com/
↧
Filtering columns in Datatables as used in AdminLTE
I'm building a Laravel app with AdminLTE integrated in the backend. AdminLTE uses DataTables to generate the tables, this works fine. But in AdminLTE it's only possible to sort columns, and it's not possible to filter columns. In one admin view I want to filter columns with a dropdown as shown in this DataTables example. I've tried to integrate the example code in AdminLTE file main.js. But I haven't got it working. In main.js there is a codesnippet where probably the new code should or could be integrated.
$('.datatable').each(function () {
if ($(this).hasClass('dt-select')) {
window.dtDefaultOptions.select = {
style: 'multi',
selector: 'td:first-child'
};
window.dtDefaultOptions.columnDefs.push({
orderable: false,
className: 'select-checkbox',
targets: 0
});
}
$(this).dataTable(window.dtDefaultOptions);
});
Does anyone have an idea how to get the filtering working?
↧
Guidance for type conversions
We're using DataTables and Editor with a custom AJAX back-end and we are confused about when and where we should do type conversions from the back-end to Editor forms and back.
Suppose that an AJAX response contains this value:
{
"name": "Tiger Nixon",
"salary": 320800
}
Is this a good columns config?
columns: [
{ data: "name" },
{ data: "salary", render: $.fn.dataTable.render.number(",", ".", 0, "$") }
]
Is this a good fields config?
fields: [
{
name: "name",
label: "Name",
type: "text"
},
{
name: "salary",
label: "Salary",
type: "text",
attr: {
type: "number"
}
},
]
This renders two input fields in the form.
in pseudo markup:
<input type="text" name="name">
<input type="number" name="salary">
I get mentally stuck on the salary field. All salaries flowing from the back-end to the Editor form are numeric up until the point where they are rendered in the HTML.
<input type="number" name="salary" value="320800">
Any changes to the salary field are naturally submitted as string (since <input> values are always strings).
Now I have a few options where I can convert that value back to a number: inside a preSubmit handler or inside ajax (as a function) or inside a postSubmit handler. The choices are a little overwhelming.
Is there a good place where I can convert values from strings back to their expected type? Or should I use strings everywhere in DataTables/Editor and handle conversions in the data layer of my app?
↧
↧
Sort is not working properly
Hello,
I'm using the dataTable plugin but the sort is not working or to be clear it works but not in a fully correct way
should I customize it first or no need
also does it work with negative numbers
↧
New Row withou Modal
Hello. I would like to know if is there any way that i can add a new row to my Datatable by clicking the Add Button but WITHOUT opening a modal with all the fields. Just create a new row with empty inputs or default values!
Thank you
↧
Problems with change of columns when server side processing after reload of datatable
Hello to forum,
Please, I have big trouble with colReorder with serverSide processing and use stateSave.
What is the problem?
If I made the initial load of dataTable by click to fetch Data button it looks OK, The sorting is OK, and the functions which change teh data in the field to anchor work fine and in console I see that it call only one saveState for save the state into DB. When I change the Column position for example id from 1st position to 3rd position after invoice number, it looks OK, but is call the stateSave two times.
But When I call the fetch Data by the button again, then the column name change position to basic position and the data stay on the new position, Unfortunately the function for change the data to anchor not change the right column, but the column by the column name, not by the column with right data. How it looks? The data with ID are in 3rd column, but the column name ID is on top of 1st column. even I see that loadState is called one time and saveState is called two times.
OK, So i try to push the button again and the name of column with ID changed the position to 2nd column and the data is still on 3rd. loadState called only one time, saveState called 2 times. When I click on the button fetchData the ID name of column move to 3rd column and function at this time run correctly and change the data to anchor. The loadState called only one time, saveState called two times again.
Please, can you help me with this? I can to find what I do bad.
Shall I run the script with debug script with write the resolution into DB?
Thanks a lot for help
Honza H
↧
How can i make actions after the end of export
I would like to know if it's possible to make an action after the export (excel, pdf, or other) from the actions buttons.
Cause when the download is finished i have no informations.
↧
↧
DataTable not refreshing after the edit
My datatable is not refereshing after I make the edit. My database is getting changed. Server is replying with the data parameter defining the data object for the edited row. Couldnt identify the issue. Plz help.
here goes my whole script
/* Formatting function for row details */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Source:</td>' +
'<td>' + d.referred_by + '</td>' +
'<td>Address:</td>' +
'<td>' + d.lead_address + '</td>' +
'</tr>' +
'<tr>' +
'<td>Status</td>' +
'<td>' + d.lead_status + '</td>' +
'<td>Remarks:</td>' +
'<td>' + d.other_info + '</td>' +
'</tr>' +
'<tr>'+
'<td>Presented By:</td>' +
'<td>' + d.other_info2 + '</td>' +
'<td></td>' +
'<td></td>' +
'</tr>' +
'</table>';
}
var editor;
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: '/testing/editLeadsJson',
table: '#leads',
idSrc: 'lead_id',
fields: [
{ label: 'ID', name: 'lead_id' },
{ label: 'NAME', name: 'lead_name' },
{ label: 'CONTACT', name: 'lead_number1' },
{ label: 'AREA', name: 'lead_area' },
{ label: 'BUSINESS NAME ', name: 'lead_buss_name' },
{ label: 'NATURE OF BUSINESS', name: 'lead_category' },
{ label: 'APPOINTMENT-DATE', name: 'app_date' },
{ label: 'APPOINTMENT-TIME', name: 'app_time' },
{ label: 'LEAD ASSIGNED', name: 'agent_assigned' },
{ label: 'Agent', name: 'lead_telecaller' },
{ label: 'SOURCE', name: 'referred_by' },
{ label: 'Address', name: 'lead_address' },
{ label: 'Remarks', name: 'other_info' },
{ label: 'Status', name: 'lead_status' },
{ label: 'Presented by', name: 'other_info2' }
// etc
]
} );
// Activate an inline edit on click of a table cell
$('#leads').on( 'dblclick', 'tbody td.editable', function (e) {
editor.inline( this, {
submit: 'allIfChanged',
submitOnBlur: true
} );
} );
var table = $('#leads').DataTable({
ajax: {
"url": '/testing/readLeadsJson',
"dataSrc": ""
},
stateSave: true,
select: {
style: 'multi',
selector: 'td:not(:first-child)'
},
columns: [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{
className: 'select-checkbox',
orderable: false,
data: null,
defaultContent: ''
},
{
"data" : "lead_id",
"className" : "text-center"
},
{
"data" : "lead_name",
"className" : "text-center editable"
},
{
"data" : "lead_number1",
"className" : "text-center editable"
},
{
"data" : "lead_area",
"className" : "text-center editable"
},
{
"data" : "lead_buss_name",
"className" : "text-center editable"
},
{
"data" : "lead_category",
"className" : "text-center editable"
},
{
"data" : "app_date",
"className" : "text-center editable"
},
{
"data" : "app_time",
"className" : "text-center editable"
},
{
"data" : "agent_assigned",
"className" : "text-center editable"
},
{
"data" : "lead_telecaller",
"className" : "text-center editable"
},
{
"data": "referred_by",
"visible": false,
"searchable": true
},
{
"data": "lead_address",
"visible": false,
"searchable": true
},
{
"data": "other_info",
"visible": false,
"searchable": true
},
{
"data": "other_info2",
"visible": false,
"searchable": true
}
] ,
pageLength: 50,
orderCellsTop: true,
fixedHeader: true,
lengthMenu: [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, "All"]],
dom: 'Bfirtlip',
buttons: [
'excel', 'pdf', 'copy',
{
text: 'Expand All',
action: function(){
// Enumerate all rows
table.rows().every(function(){
// If row has details collapsed
if(!this.child.isShown()){
// Open this row
this.child(format(this.data())).show();
$(this.node()).addClass('shown');
}
});
}
},
{
text: 'Collapse All',
action: function(){
// Enumerate all rows
table.rows().every(function(){
// If row has details expanded
if(this.child.isShown()){
// Collapse row details
this.child.hide();
$(this.node()).removeClass('shown');
}
});
}
},
{ extend: "edit", editor: editor }
]
});
// Show all child nodes
table.rows().every( function () {
this.child(format(this.data())).show();
this.nodes().to$().addClass('shown');
});
// Add event listener for opening and closing details
$('#leads tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
// Restore state
var state = table.state.loaded();
if ( state ) {
table.columns().eq( 0 ).each( function ( colIdx ) {
var colSearch = state.columns[colIdx].search;
if ( colSearch.search ) {
$( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
}
} );
}
} );
The response from the server is
[{"data":[{"action":null,"agent_assigned":"","app_date":"23 dec","app_time":"10","last_action_at":null,"last_action_by":null,"lead_address":"ch","lead_area":"wsx","lead_buss_name":"M C","lead_category":"Insurance Consultants","lead_id":1,"lead_name":"test","lead_number1":"123","lead_status":null,"lead_telecaller":"Navin","other_info":"test","other_info2":null,"referred_by":"Vendors "},{"action":null,"agent_assigned":null,"app_date":"Call Bak - Jan'19","app_time":null,"last_action_at":null,"last_action_by":null,"lead_address":"No 480, NSC Boss Road, Kondithope-Sowcarpet, Chennai - 600001, Near Amman Temple","lead_area":"Sowcarpet","lead_buss_name":"Jain Jewellery","lead_category":"Jewellers","lead_id":2,"lead_name":null,"lead_number1":"9994790708","lead_status":null,"lead_telecaller":"Navin","other_info":null,"other_info2":null,"referred_by":"Jain Vendors "},{"action":null,"agent_assigned":null,"app_date":"Shop Closed","app_time":null,"last_action_at":null,"last_action_by":null,"lead_address":"Nirmal Plaza, Shop No 4, Ground Floor, 159, Mint Street, Sowcarpet, Chennai - 600001, Near Kakada Sweets","lead_area":"Sowcarpet","lead_buss_name":"Jain Silver","lead_category":"Jewellers\/Silver","lead_id":3,"lead_name":null,"lead_number1":"25360510\/9176351688","lead_status":null,"lead_telecaller":"Navin","other_info":null,"other_info2":null,"referred_by":"Jain Vendors "}]}]
↧
Print Preview not showing as HTML insight
Hello,
I have an problem, I have some amount in blue and bold on html table but on Print Preview option is not showing the same as the html.
Is a way to do the same as html?
thanks in advance.
↧
Sorting a column by a value different than visible display
Hi there everyone!
I've got a column I'd like to sort. It's a time spent row and It's run through a function to make seconds human readable so instead of 613, it shows "10 minutes, 13 seconds". I tried to place the seconds in a span around the human readable number
span class="4201"
But it's not working, it will still sort like the following:
10 minutes
9 hours, 10 mins
8 minutes
7 days, 1 hour, 45 mins
How would I get this column to sort by the seconds without making it visible in the td?
Thanks for your time!
↧
Export buttons are not displaying
Hi, I have a datatable in my page which is having dynamic data. I used below code for exporting my data but dont know why bittons are not visible. I have included all scripts also mentioned below.
$('#tblConsolidatedReport').dataTable({
"data": table_data.Table,
"columns": columns,
"destroy": true,
"cache": false,
"ordering": true,
"scrollX": true,
buttons: [
'copy', 'excel', 'pdf'
]
});
here are the links and scripts i used
<link href="../assets/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js "></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- Jquery Core Js -->
<script src="../assets/bundles/libscripts.bundle.js"></script>
<!-- Lib Scripts Plugin Js -->
<script src="../assets/bundles/vendorscripts.bundle.js"></script>
↧
↧
URL detection and search with server-side processing
When migrating my current code (client-side) to server-side processing, one of the functions that broke down was my URL detector. This allows DT to tie url changes to search, so they can be linked to later on.
Mind you, search still works. table.columns(1).search(key).draw() works just fine on other parts of the code, but not here. The code is triggered by initComplete, while other searches are triggered by user input.
var url = decodeURI(window.location.href);
var urlcheck = url.includes("=");
var urlauts = url.includes("aut");
var urlpubs = url.includes("pub");
var urltags = url.includes("tag");
var strsplit = url.split("=").pop();
var strspaced = strsplit.replace(/\+/g, " ");
var detectSearchParams = function () {
if (urlcheck == true) {
$('.form-control').val(strspaced);
if (urlauts == true) { // Detect authors url
table.columns(1).search ( strspaced ).draw();
$('.searchcat').not($('.auths')).removeClass('active');
$('.auths').addClass('active');
$('#gosearch').html('<i class="fas fa-search"></i><span>Authors</span>');
}
else if (urlpubs == true) { // Detect publications url
table.columns(6).search( strspaced ).draw();
$('.searchcat').not($('.pubs')).removeClass('active');
$('.pubs').addClass('active');
$('#gosearch').html('<i class="fas fa-search"></i><span>Publications<span>');
}
else if (urltags == true) { // Detect keywords url
table.columns(4).search( strspaced ).draw();
$('.searchcat').not($('.keys')).removeClass('active');
$('.keys').addClass('active');
$('#gosearch').html('<i class="fas fa-search"></i><span>Keyword</span>');
}
else if (urlauts == false && urlpubs == false && urltags == false ) { // Detect general url
$('#gosearch').html('<i class="fas fa-search"></i><span>Geral</span>');
table.search( strspaced ).draw();
}
}
}
↧
Set column.searchable = true after DataTable initialisation
Hi everyone,
I've initialised my dataTable with the following setting:
columnDefs: [
{ targets: 1, type: 'diacritics-neutralise', searchable: true },
{ targets: '_all', searchable: false}
],
But depending on some user interactions in my application, I'd like to make column(0) searchable.
Is it possible?
Thank you,
Guilherme
↧
Is there a way to sort similar to MySQL order by field?
I have a situation where I need to sort a table by a column whose content (which is limited to a small set of values) does not fall alphabetically into the desired order for display. The MySQL feature ORDER BY FIELD(...) would accomplish what I need when the page is loaded. I would need to be able to do this as the page might be re-sorted while it is being viewed. Does DataTables have a way to do this, client-side, that I've just not found?
↧