I have many columns, the order and quantity its not always the same, and some hidden colums and left joins too. But some of this columns have toggles that send data to specific columns to db thru ajax.
The toggles can be at any position and can be more than one.
Im triyng to add attr to columns to read it and know the cell db and table were send the data.
↧
its posible to add attr to a column and read it? to send data to db with ajax with toggles
↧
Editor - Manipulate Client Table
Dear Allan,
long time back you answer this question that it will be available in 1.6,
Question from above link "
Is there a way to use the Editor controls on a client table only? I am looking to start my clients with a blank table. They are able to add new items, or remove or edit these items. This would all be done locally to the table. Then when complete, I would have a separate button to save the new contents of the table. I don't need to save the contents on the fly like the majority of examples I have seen - only once the table is finalized will it be save. Any help or examples would be appreciated."
I have same requirement but still I searched alot but not found any related solution, can you please help me on this ?
"
Best Regards
↧
↧
Editor Layout - Multi-column layout and default layout on same page
Dear folks,
I have two editor on same page, editor-a having three fields and editor-b having more than 10 fields I want to use default layout for editor-a and Multi-column layout for editor-b.
Currently if I use below css it will apply on both editor, can you help me please how can I achieve this ?
div.DTE_Body div.DTE_Body_Content div.DTE_Field {
width: 50%;
padding: 5px 20px;
box-sizing: border-box;
}
div.DTE_Body div.DTE_Form_Content {
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
↧
Buttons disappear when language url is loaded instead of code
Hi,
When initializing datatables I use language : <json stuff>
However, if I set url : <file.json> (with same contents, in this case Swedish.json downloaded from datatables.net) then the buttons disappear.
Check out debug code ovelax
Best regards,
Mats
{
"sEmptyTable": "Tabellen innehåller ingen data",
"sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
"sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
"sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
"sInfoPostFix": "",
"sInfoThousands": " ",
"sLengthMenu": "Visa _MENU_ rader",
"sLoadingRecords": "Laddar...",
"sProcessing": "Bearbetar...",
"sSearch": "Sök:",
"sZeroRecords": "Hittade inga matchande resultat",
"oPaginate": {
"sFirst": "Första",
"sLast": "Sista",
"sNext": "Nästa",
"sPrevious": "Föregående"
},
"oAria": {
"sSortAscending": ": aktivera för att sortera kolumnen i stigande ordning",
"sSortDescending": ": aktivera för att sortera kolumnen i fallande ordning"
}
}
↧
How to change rowReorder.dataSrc attribute dynamically
I am using dataTable 1.10.12. I am using roeReorder feature in it. It is working fine currently. But the problem is that If I sort DataTable on some other column then after rowReordering is not working. how can I do it ? please suggest me.
↧
↧
How to change rowReorder.dataSrc attribute dynamically
I am using DataTable 1.10.12 , and rowReorder in it. It is working fine but when I apply ordering on any column, It is not working. Please suggest me. How can I achieve it? How can I change rowReorder.dataSrc dynamically?
↧
how to clear the following error
DataTables warning (table id = 'DataTables_Table_0'): Requested unknown parameter '0' from the data source for row 0
@model ECS.Models.UserViewModel
<a href="#" class="btn btn-info" onclick="AddNewUser(0)">Add New User</a> <br /><br />
Create A Popup Modal With Registration Form For Add Or Edit Student Record
@Html.HiddenFor(m => m.UserId, new { @id = "UsrId", @value = 102 })
@Html.TextBoxFor(m => m.UserName, new { @id = "UsrName", @class = "form-control", @placeholder = "Name*" })
@Html.TextBoxFor(m => m.EmailId, new { @id = "Email", @class = "form-control", @placeholder = "Email*" })
@Html.TextBoxFor(m => m.Password, new { @id = "Pass", @class = "form-control", @placeholder = "Password*" })
</div>
<
script>
$("#LoadingStatus").html("Loading....");
$.get("/Home/GetUserDetails", null, DataBind);
function DataBind(UserList) {
//This Code For Receive All Data From Controller And Show It In Client Side
var SetData = $("#SetStudentList");
for (var i = 0; i < UserList.length; i++) {
var Data = "<tr class='row_" + UserList[i].UserId + "'>" +
"<td>" + UserList[i].UserId + "</td>" +
"<td>" + UserList[i].UserName + "</td>" +
"<td>" + UserList[i].EmailId + "</td>" +
"<td>" + UserList[i].Password + "</td>" +
"<td>" + "<a href='#' class='btn btn-warning' onclick='EditUserRecord(" + UserList[i].UserId + ")' ><span class='glyphicon glyphicon-edit'></span></a>" + "</td>" +
"<td>" + "<a href='#' class='btn btn-danger' onclick='DeleteUserRecord(" + UserList[i].UserId + ")'><span class='glyphicon glyphicon-trash'></span></a>" + "</td>" +
"</tr>";
SetData.append(Data);
$("#LoadingStatus").html(" ");
}
}
↧
DataTables warning (table id = 'DataTables_Table_0'): Requested unknown parameter '0' from the data
↧
How to detect first, previous, next, last button clicked in full pagingType
I have a huge table so fetch offset, limit is not going to work as it is taking ages. So, I am thinking to move to key seek paging method so my query is going to be different for each click as mentioned below:
/First/
select top (1000) id,name from table_name order by id desc;
/returns data from 56679923-56678924/
/Next/
select top (1000) id,name from table_name where id < @previous_lowest_id order by id desc;
/returns data from 56678923-56677924/
/Previous/
SELECT * FROM
(select top (1000) id,name from table_name where id > @previous_highest_id order by id asc) as myAlias
ORDER BY id desc ;
/returns data from 56679923-56678924/
/Last/
SELECT * FROM
(select top (1000) id,name from table_name order by id asc) as myAlias
ORDER BY id desc
So, I need to run different query according to clicked buttons. So, necessity of detecting different click is arised. If there is any inbuilt method that's great. Otherwise, any other hacks to deal with this situation is also welcomed.
Furthermore, I can see different id on each li something like
<li class="paginate_button page-item next disabled" id="DataTable_next">
<a href="#" aria-controls="coloradoDataTable" data-dt-idx="2" tabindex="0" class="page-link">Next</a>
</li>
So, I have also tried doing the following but with no success
$('#DataTable_last>a').click(function() {
alert('zz');
});
How, can I get rid out from this problem.
↧
↧
Fixed Header Scrolling problem-(2018-2019)
HI Everyone, I've the same problem that this topic:
https://datatables.net/forums/discussion/7508/fixed-header-scrolling-problem
I wonder if It's posible that this problem has been solved at any moment
↧
How to access instance of own field?
Hi
I was searching for answer without success, trying to read manual and guide:
https://editor.datatables.net/manual/development/field-types
but has stack.
I have own field type prepared based on above guide. Working fine, but I do not know how can I access my own instance from set(), get() etc field's functions? I have code doing some stuff preparing widget etc and in some case I would like to fire error or put other information for user using build-in field attributes and functions.
Should I store reference to my object in global jscript scope? What is the proper way to use API functions provided by Editor on my own field instance?
↧
buttons on bootstrap4 does not show on grid
console error: 'table.buttons () is not function'
$(document).ready(function() {
var table = $('#table_id').dataTable( {
scrollY: "645px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
heightMatch: 'auto'
},
language: {
"url": "plugins/datatables/plugins/Portuguese-Brasil.json"
},
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ],
initComplete: function () {
table.buttons().container()
.appendTo( $('#table_id_wrapper .col-md-6:eq(0)', table.table().container() ) );
}
} );
} );
↧
Size of columns in table
Hey Y'all,
Is it possible to resize a column if it contains a lot of data?
I'm using Datatables Editor.
Now, would it be possible to resize the column if it contains a larger set of data like above?
It would be great if it is possible to show some of the data, and then "..." afterwards to indicate that the column contains more data - or something similar!
Have a great day!
↧
↧
Using Editor with parcel and webpack bundlers
Hi all,
I'm trying to use the parcel bundler with Editor but I get no table and I see the following errors in the Chrome console when I visit http://localhost:1234/:
datatables.min.js:14 jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (http://localhost:1234/table.studentlist.46af4f5f.js:114:18)
at l (https://cdn.datatables.net/v/dt/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:14:29375)
at c (https://cdn.datatables.net/v/dt/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:14:29677) undefined
w.Deferred.exceptionHook @ datatables.min.js:14
datatables.min.js:14 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (table.studentlist.js:10)
at l (datatables.min.js:14)
at c (datatables.min.js:14)
I've seen several related threads such as this one for parcel:
https://datatables.net/forums/discussion/53858/using-parcel-bundler-no-css-no-buttons-unknown-button-type-build-error-fs
and this issue on github:
https://github.com/parcel-bundler/parcel/issues/432
I've also found many more about webpack, some of them with solutions:
https://datatables.net/forums/discussion/45179/webpack-is-looking-for-an-index-in-the-datatables-folder
https://datatables.net/forums/discussion/53044/datatables-net-editor-bs4-webpack-installation-issues
https://stackoverflow.com/questions/36791472/jquery-plugin-datatables-with-webpack-and-typescript
I haven't tried with webpack yet but since I prefer parcel because of its simplicity I would like to ask what is the current state of the integration of both of them with Editor. Does parcel not work with Editor? Does webpack work with Editor? Could someone please enlighten me what are the problems, if there any?
I would also like to kindly ask the developers to provide guides for these integrations.
↧
Create row children tables via HTML?
Is there a way to hardcore in HTML row children? For example
<tbody>
<tr id="parent"><td>Name</td></tr>
<tr id="child">
<table>
</table>
</tr>
</tbody>
then show and hide it doing table.row($('#parent')).child.show() or hide()? I tried doing this but it confuses DataTablesJS and then I can't have sort or search. Also I want search to be able to work on the child tables. Thanks in advanced.
↧
Bootstrap 4.2.1 doesn't work with DataTables
A few days ago was realised a new version of Bootstrap (4.2.1) and it doesn't work with DataTables 1.10.19. Can you make a correction, or tell me what to change to get back working? Thx
↧
Using hrefs to filter DataTables data
I have a categories list and a documents table and both are populated with local JSON data. Each category item corresponds to a document (some documents have multiple categories), and I want to make it so that clicking on a category will filter its documents in the table. For now the categories are href'd but don't do anything.
Since the documents are housed in a DataTable and rendering the categories did not use DataTables, I'm not sure how I would proceed with getting both to work with one another.
I've included a JS snippet below. I haven't been able to get the table to display with JS Fiddle properly, so if you'd like to see the HTML then let me know.
JS snippet:
import $ from 'jquery';
import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';
import dt from 'datatables.net';
var categories = '';
var tableRes = '';
export default class {
constructor() {
this.loadData();
this.loadTableData();
}
Loading the categories:
loadData() {
let res = JSONfile.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).map(function(obj) {
return {
"FileName": obj.FileLeafRef,
"Path": obj.EncodedAbsUrl,
"Categories": obj.ResourceType.results.map(function(val) {
return val.Label;
}).join(";")
};
});
JSONfile.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).map(function(obj) {
return obj.ResourceType.results.map(function(val) {
return val.Label;
})
});
Showing each Category once:
let unique = {};
let temp = JSONfile.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).forEach(function(obj) {
obj.ResourceType.results.forEach(function(val) {
unique[val.Label] = true;
})
});
let categories = Object.keys(unique).sort();
Turning Categories into hrefs and adds them to .indiv-label
$(".indiv-label").html(categories.join("<br>"))
.contents().each(function() {
if (this.nodeType == 3) {
let elem = $("<a>", {
href: "#" + this.nodeValue ///// ---------------------- Not sure what url to put where the # is
});
$(this).wrap(elem)
}
});
} // ------------- loadData()
Loading the table
loadTableData() {
$.noConflict();
let tableRes = JSONfile.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).map(function(obj) {
return {
"Path": obj.EncodedAbsUrl,
"Titles": obj.File.Name,
"Categories": obj.ResourceType.results.map(function(val) {
return val.Label;
}).join(";"),
"Blank": ''
}
});
$('#km-table-id').DataTable( {
columns: [
{ data: "Titles" },
{ data: "Categories" } // hidden col-3 categories
],
columnDefs: [
{
data: "Path",
render: function(data, type, row) {
return $('<a>')
.attr({target: "_blank", href: row.Path})
.text(data)
.wrap('<div></div>')
.parent()
.html();
},
targets: 0
},
{ searchable: true, targets: [1], visible: false },
],
data: tableRes,
language: { searchPlaceholder: "Search All Documents" },
lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
order: [],
// pageLength: 500,
paging: true,
pagingType: "full_numbers",
responsive: true,
scrollCollapse: true,
scrollX: true,
scrollY: 450,
stateSave: true
});
} // ------------------ loadTableData
} // ------------- export default class
↧
↧
Buttons do not show on bootstrap4
What can I be doing wrong?
Could you explain this function better?
.appendTo ($ ('# table_id_wrapper .col-md-6: eq (0)', table.table (). container ())); ?
var table = $('#table_id').DataTable( {
scrollY: "645px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
heightMatch: 'auto'
},
language: {
"url": "plugins/datatables/plugins/Portuguese-Brasil.json"
},
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ],
} );
table.buttons().container()
.appendTo( $('#table_id_wrapper .col-md-6:eq(0)', table.table().container() ) );
} );
↧
get datatable api of a table after it has been initialized using Id
Is it possible to get the datatable api for a datatable after it has been initialized? So for example I have a table inside a row and it's generated like so
table = $(row.child()).DataTable();
And let's say I want to search through the table and child data tables for a inputted word. So I need to call it later by doing
row.child() and get the api from that.
↧
Submiting a bubble data with json
How i can submiting data with a json in this example https://fabriciodidi.com.br/manager/site/child/a/teste.php
i dont know how to take the new value and how to update them in a post json, the code you wanna see in DevTools debugger chrome ou firefox F12.
↧