Till now i used to have and use DataTables with php. Now i want to use, if i can, the DataTables for asp.net. Can i do it? What do i have to download in order to use these libraries for ASP.NET
DataTables and ASP.NET
Unable to do column().search() on render/filter data
I have individual column searching (in addition to the global search), and the column searches aren't hitting my filter
data.
Initialization of one of these columns:
{
data: "Date", name: "date", render: function (data, type, row) {
if (type === 'display' || type === 'filter') {
return new Date(data).toLocaleDateString();
}
return data;
}
}
and the column search setup:
$("#my-table .filter-row input").each(function(i) {
$(this).on('keyup change', function() {
table.columns(i).search($(this).val()).draw();
});
});
Screenshots (imgur):
Global search success
Column search fail
Does column().search()
not use the filter
data source? Or am I (more likely) overlooking something?
Excel export does not export the data in the table just the name and table headings
I am trying to export a table of data extracted by Java, passed back to Ajax using JSON, and populating the table with Ajax in HTML. Using a table populated with data in the HTML works fine.
Java:
if (packSummaryList == null || packSummaryList.isEmpty()) {
response.sendError(HttpServletResponse.SC_BAD_REQUEST, "No one joined.");
} else {
String json = new Gson().toJson(packSummaryList);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
Ajax:
.done(function(responseJson1a){
dataType: "json";
var tablebody = "";
try{
for (i=0; i < responseJson1a.length; i++) {
tablebody += "<tr><td>"+responseJson1a[i].section+"</td><td>"+responseJson1a[i].metricTotal+"</td></tr>";
}
$("#mytablebody").empty();
$("#mytablebody").append(tablebody);
}
catch(e){
console.log(e);
}
})
HTML:
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<table class="table table-hover table-bordered" id="joinedTable">
<thead>
<tr>
<th>Section</th>
<th>Joined</th>
</tr>
</thead>
<tbody id="mytablebody"></tbody>
</table>
<div style="text-align: center;">
<span id="ajaxGetUserServletResponse1" style="color: red;"></span>
</div>
</div>
search by clicking on grouped field
I have a table grouping by a field and I would like that when clicking on the group, I will search for that value
"initComplete": function (settings, json) {
var api = this.api();
api.$('td').not(":nth-child(3), :nth-child(6), :nth-child(7), :nth-child(8)").click(function () {
api.search(this.innerHTML).draw();
});
},
"drawCallback": function (settings) {
var api = this.api();
var rows = api.rows({
page: 'current'
}).nodes();
var last = null;
api.column(0, {
page: 'current'
}).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before('<tr class="group"><td colspan="6"><b>' + group + '</b></td></tr>');
last = group;
}
});
},
Ordering on dynamic data
Hello dear friends,
i have a question: So i have data in my table with 5 columns. The data is auto refreshed dynamically which works great. However one issue; i cannot order the data dynamically. Now i understand order api is only available at initialise, but is there anyway to trigger an order without having to click on the column after the data changes? It does work when clicking manually, so there must be a way...right ?
Thanks
mdm
#BlackHairChallenge is Celebrating the Magic of Black Hair
Peruvian hair weave is getting the curiosity of many because it
Differents format dates for input hidden and input date
Hi, Allan. How can I capture the date in a hidden field, but capture the full date, since at the current time I am capturing only in the format yyyy-mm-dd, but need to capture in the format yyyy-mm-dd HH: mm: ss without changing the original field, ie in the hidden field capture the full date and in the original field continue with the same format?
File Export with Individual Column Search
How can I combine this 2 functions?
Disable On Load Ajax Call In Datatable
I am using DataTables 1.10.11 in my project to display some user data on the Page. I am Loading the table data from the server using Ajax call. My data table working fine without any issue. My Datatable:
$("#user_table").DataTable({
"destroy": true,
"order": [],
dom: "Bfrtip",
"bProcessing": false,
"bServerSide": false,
"searching": false,
"pageLength": 7,
"autoWidth": false,
"bAutoWidth": false, // Disable the auto width calculation
"sort": "position",
"stateSave": true,
"ajax": {
url: "Url/data",
type: "GET",
dataSrc: function (json) {
$('#user_profile_box div.overlay').fadeOut();
return json;
}
}
});
I don't want to load my datatable content from server on load of the page. I want my table to load if user click on load button. Is there any workaround for this issue??
Thank You!!!
Export Issue
Hi,
I am unable to export in any of export feature when there is presence of syntax (.) in my label. Any one can help to figure out this problem. I will be thankfull if it gets resolve asap.
DataTables get data from render row parameter
Hi everyone, I'm using DataTables pluging for Jquery, this is what I'm trying to do:
$('#familiars').DataTable({
processing: true,
serverSide: true,
ajax: "/familiars/list/",
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'lastname' },
{ data: 'age' },
{ data: 'country' },
{ data: 'address' },
{ data: 'id', render : function (data, type, row){
btn='<a class="btn btn-success" href="#" data-toggle="modal" data-target="#modal-edit" onclick="setRow( \'' +row+ '\' )"/><i class="fa fa-edit"></i> Edit</a>';
return btn;
}
},
],
});
function setRow(row){
console.log(JSON.stringify(row));
console.log(row);
console.log(row.id);
console.log(row.name);
}
Pass the row parameter through the function to get all the data from the row and use it to a edit form modal but in the function setRow I only get object Object in all that's trys
If I use for example row.name or data in the onclick="setRow( \'' +row+ '\' )"/ get the info but I want get all in the row parameter or another way to get all the row info to the function.
Thanks for the help!
How to enable and disable sorting option for a datatable dynamically?
How to enable and disable sorting option for a datatable dynamically(Not for a particular column. whole datatable ). Is there any api methods are available for to do this and how to add and remove "dom" option dynamically?
1.10.17
Love it that the little arrows in the first row are gone, but I think there are some issues.
I now get horizontal scroll bars where I didn't on 16, and the scroller plugin does not seem to work.
Bootstrap 4.1
If you'd like some test cases let me know.
Steve
Symfony 4 - How to use custom Datatables ajax to server
Hi,
I am new using Datatables and we think it's a powerfull tool for our project, but I'm lost with it's implementation.
I need a Datatable on my page and sending/receiving data to/from my symfony 4 app.
As we have complex custom authorization to check any call to server, and also to check if the user can or can not edit any sended data (and in fact, read or write over a Symfony Entity), and also check the received data format, I don't know how to configure DataTables to send/get the data to a specific Symfony Controller so we can do all this process.
In fact, I need a custom send/receive data and sorry, I don't find any page explaining the sended/received format to read/modify/delete rows.
Or may be I am wrong and all this stuff can be configured for Symfony 4.
Coul you help me? Thanks.
Arrays of arrays or arrays of object ?
Hi,
I'm trying to display datatables with data from my database. The json response looks like this :
{"data":[["pineapple","1","1","1",null,"09\/Jan\/18"],["tomato","2","1","2",null,"31\/Jan\/11"],["banana","3","2","1","test","01\/Jan\/20"]]}
Is that an arrays of arrays or arrays of object ? If it is an array of arrays, can you affirm that I don't have to put "columns" : [column names]
please ?
table footer misalignment with table body
Hello ,
I have one problem need your help , I create a normal stable with dataTable and Bootstrap 3 . After i only add standard table footer tag , I find out that table footer misalignment with table body . i attached error picture .Please give me some suggestion .
below is my html code :
序号 No | ID | 栏目名称 name | 状态 status | 属性 attr | 所属模型 model | 所属父栏目 cate | 排序 sort | 操作 operation |
---|
Thanks.
BR
Kai
Change the Style of Datatable Search Input
Hi,
I have a > Datatable
with search input at the top of the table,
My Datatable:
$("#table_id").DataTable({
dom: 'frtip'
});
How can I change the default style of Datatable Search input
I want to give border-radius: 3px;
is there any way to do this?
Thank You!!!
How do i download pdf as same as it is displaying the application?
Hi all,
I am a newbie to this forum and am working on data tables export. I want to make PDF and print task for my project. For my task, I need to show the same count as in the application to the print paper and as well as pdf.
I have shared a screenshot. In the first screenshot, am showing only 10 persons so I want to show only that 10 persons in the print and PDF. How can I make it? Can anyone help me on this?
Thanks in advance.
Print Page
Hi,
I have a problem like I am calculating total amount for every page and Grand total and displaying it. It is showing correctly on the web page but if I give a print, Every page is displaying the same total. I have added a screenshot for your reference. Can you please help me with this? Thanks in advance.
Datatables with strange values from json
Hello,
I try to display data from my database. In my controller I return data like this : return $this->render('@gkeep/erp/view/viewArticle2.html.twig', array('data'=>$res));
$res is the json who refers to the data in my database. In my twig(html) here is the function for datatables :
`
$(document).ready(function() {
$('#example').DataTable({
/* "columns": [
{"data": 'reference'},
// {data: "typearticle"},
{"data": "designationfr"},
{"data": "designationen"},
{"data": "plan"},
{"data": "url"},
{"data": "datecreation"}
],*/
"serverSide": false,
"bprocessing": false,
"dataSrc" :"",
"mDataProp":"",
// "ajax": " path("viewArticle2") }}",
"data" : " {{ path("viewArticle2") }}",
/* "columnDefs":[
{
"render": function (data, type, row) {
return row['0'];
// console.log(row);
},
"targets": 0
},
{
"render": function (data, type, row) {
return row['1'];
// console.log(row);
},
"targets": 1
},
{
"render": function (data, type, row) {
return row['2'];
// console.log(row);
},
"targets": 2
},
{
"render": function (data, type, row) {
return row['3'];
console.log(row);
},
"targets": 3
},
{
"render": function (data, type, row) {
return row['4'];
// console.log(row);
},
"targets": 4
},
{
"render": function (data, type, row) {
return row['5'];
// console.log(row);
},
"targets": 5
},
]*/
});
});
/* $.ajax({
url: path("viewArticle2") }}',
type: 'GET',
dataType: 'json',
success: function (response) {
console.log(response)
}
});*/
</script>
`
however the data displayed in the datatables above doesn't match with the json response. And besides all data are in the first column instead of each column... Any advice or help someone, please ?