holt59 / datatable Goto Github PK
View Code? Open in Web Editor NEWJavascript Plugin for data tables creation
Home Page: http://holt59.github.io/datatable/
License: MIT License
Javascript Plugin for data tables creation
Home Page: http://holt59.github.io/datatable/
License: MIT License
Hi, I have downloaded and I am implementing this plugin on a table with dynamic loaded rows from PHP but I am getting this error: t[o].cells[n] is undefined
I have initialized the datatable with $('#my-table').datatable({ pageSize: 10 });
Do I am forgetting something?
I have made a pretty complex table, and in the interest of showing important items without making the page overwhelming, I've made child rows in the table with the additional breakout of information. Then the user can click on the table row itself, the child row will expand and the details revealed using Bootstrap Accordion.
When I do this though, I get an error saying "Cannot read property 'innerHTML' of undefined", but removing the child rows make everything work again.
I only want the filtering to work on the parent rows, and leave the child rows alone. I would imagine that since the child row does not have the same structure as the parent row (essentially tables within the <tr>
), it is not able to generate the filtering correctly.
Any suggestions? Perhaps a method to tell datatable to only filter/sort on the parent rows?
I am attempting to search multiple table columns with one search field.
The table is built on the page prior to initilizing datatable so I am guessing the data key is based upon the column number...
I first setup the filters for certain columns and simply added a listener to my search field to populate each column's filter field and triggered them but this only results in removing all data because the search term cannot be found in all of the columns.
I am guessing it is possible with the documented "lambda" filter but the terminology used is a bit confusing to me and difficult to implement. Upon further exploration I am just curious if it is even possible and if so could you give me a bit more of a project direct example?
I have a table with 5 columns and simply want to search the first, third, fourth, and fifth coulmns with a certain search term. I would like for it to show all rows that have at least one match in any of those 4 columns.
Thank you for your help, attention, and time... in answering my questions and for providing the datatable javascript.
Hello, the plugin works perfect.
But I'm having a problem. When I update a record in and reload my table, the filter data, reordering is not updated. There is some function or method that you can use to update this data.
Hi!!,
How to order a date field with format d/m/Y???
I have tried but I can not get it to order
I use Jquery and the third column is of the date type.
Thanks!!!
Hi
Been using this quite a bit and it works well in most situations.
I've been thinking of an enhancement that would handle complex tables
config.sort = [false, true, 4, {column: 7, func: number_sort,}];
So the integer is similar to data-sort="4" in that header.
{column: 7, func: number_sort,} applies the function number_sort to column 7 in a similar way to the current functionality except it is now possible to specify the data column.
Thought these two enhancements would allow the plugin to handle much more complex tables.
Jules
I am add both datatable.css
and datatable-bootstrap.css
but the style is not active for pagination
Hi,
Is it possible to transform the 'datatable' class name into a parameter (which would default to 'datatable')?
It'd help with the integration of datatable into html/css which already uses this class name for something else (and where I can't change it).
I'm not sure it's easily feasible, though, as I guess this parameter must be stored somewhere.
Let me know your thoughts and how I can help!
Cheers.
I'm consuming data from a web service/API.
When the response is arrived, I have to iterate over the list, fetch some data of interest, build new array of data then show the array on the datatable.
How can I achieve this using ajax option?
Can anybody give an example of how to define a default sort column? Is this is possible at all?
Best Regards!
BTW I like "datatable", it is lightweight and highly performant even on large tables.
Hello,
first very many thanks for this great grid!
but if I have contenteditable td's, they aren't contenteditable anymore after initializing your grid...
Is there are workaround?
I could use input-tags, but contenteditable would look smoother... :)
Thanks in advance for reply!
If I set the filter to "true" for a cell that contains certain types of punctuation, it breaks the ability to filter or sort the entire table.
Observed with these types of punctuation:
exclamation point !
colon :
period .
Oddly enough, commas are okay.
The error thrown is: Uncaught error: Syntax error, unrecognized expression: [content of cell with punctuation]
I was doing a simple form with a table, it consists in the following i create a button to load more rows and avoid DOM overload or too much load to the page, but i generate the rows and when i want to filter data or change the page size, my content is erased.
In your documentation you tell that if i want to build the table with HTML, then i need to set * data: undefined||false*, but this doesn't work.
Note: I build my HTML content with one request to my API.
Have you an idea about what is the problem?
Hello,
According to the documentation destroy is supposed to "Remove the datatable." However, I have found out that is not the case in my situation. I am uncertain as to how to remove the datatable once I have connected to it.
What I am doing is creating a search results and your paging system is a great tool and works wonders, but when a user wants to search something the datatable tool will not "forget" the previous entry no matter what I try. The results will always show whatever was first "inserted".
I will post the code on what I am doing and please correct me if I am using this tool in an incorrect manner. Any help would be greatly appreciated.
Code:
for(var intRow = 1; intRow <= MaxRows; intRow++)
{
var rows = [];
rows.push(rowArray[intRow][0]); // Cell 1
rows.push(rowArray[intRow][1]); // Cell 2
rows.push(rowArray[intRow][2]); // Cell 3
rows.push(rowArray[intRow][3]); // Cell 4
rows.push(rowArray[intRow][4]); // Cell 5
rows.push(rowArray[intRow][5]); // Cell 6
rows.push(rowArray[intRow][6]); // Cell 7
rows.push(rowArray[intRow][7]); // Cell 8
rows.push(rowArray[intRow][8]); // Cell 9
rows.push(rowArray[intRow][9]); // Cell 10
rows.push(rowArray[intRow][10]); // Cell 11
rows.push(rowArray[intRow][11]); // Cell 12
rows.push(rowArray[intRow][12]); // Cell 13
rows.push(rowArray[intRow][13]); // Cell 14
rows.push(rowArray[intRow][14]); // Cell 15
rows.push(rowArray[intRow][15]); // Cell 16
rows.push(rowArray[intRow][16]); // Cell 17
tableData.push(rows);
}
try {
if(jq1_11_1('#tblResults').datatable('select', 1) == null)
{
jq1_11_1('#tblResults').datatable({pageSize: 50, destroy: null});
//Also have tried with no success
// jq1_11_1('#tblResults').datatable('destroy');
}
}
catch(err) {
// On the first time load there is no data.
}
//data: tableData,
jq1_11_1('#tblResults').datatable({
insert: tableData,
pageSize: 50,
sort: [true, true, true, true, true, true, true, true, true, true, false, true, true, false, false, true],
filters: ['select', true, 'select', 'select', 'select', true, 'select', 'select', 'select', true, false, true, true, false, false, true],
filterText: 'Type to filter... '
}) ;
If I were to comment out the jquery calls using datatable no matter what was searched the results will correctly show.
What am I doing wrong? How do I tell the datatable tool to "forget" what I have inserted into it.
Thanks!
This is more of a feature request than an issue. A method you can call e.g datatable.reload()
to re-fetch the data from the provided URL on the AjaxOptions
. The refresh property is available but it might not be useful and relevant in some use cases.
A user table with options to toggle status on/off via an ajax call. After execution, I would like to fetch and update the existing data without having to reload the page.
Now this plugin throws errors in IE8-10 because of "dataset" usage. I had to use old version of plugin without "dataset" and it worked fine.
Is there a way to customize the markup for the paging div? Basically, I only need arrows but also I need to put the current recordset range. This is an example of what I'm talking about:
<<< < 1-10 > >>>
After we click the right arrow it would look something like:
<<< < 11-20 > >>>
When refreshing, the current page should not be changed.
when i try to integrate with table whose multiple row are span , it will show me this error
Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
Error raise in this block :
for (s = 0; s < o.length; ++s)
this.data[s].push(d(o[s].cells[h].innerHTML.trim())) // error raise here
I don't understand where I made a mistake. Can you help me with this?
My Code :
$('#orders-datatable').datatable({
data: {
url: "{{ route('completed-orders') }}",
type: "get",
size: null,
allInOne: true,
refresh: false
},
});
My Error :
Cannot set properties of null (setting 'innerHTML')
Good Day Sir,
Is there a way to extract all the table record, after filtering, etc, including the other paginated data?
Currently when using the datatable.all(true) option will only return the viewable part of the table but not the other data. Hoping for your response. Thanks.
Based on the screenshot below, I can only extract page 1 but i also need to extract pages 2 - 4.
To work around this I use $timestamp.
Hi, again me: D
I have the following case and I hope you can help me.
I am adding the following code by jquery:
$('.datagird tr').click(function(){
var code = "";
code = $(this).find("td").eq(0).find("input").val();
$("hdfCode").val(code);
$(".selectRow").toggleClass('selectRow');
$(this).find("td").toggleClass('selectRow');
});
Everything works fine, the problem occurs when I make a filter or change of page, then the click event of the row stops working, I imagine it is due to the restructuring of the table.
Any idea to keep the click event in the row working, even after making a filter or changing the page.
It ’s interesting. Well done!
Unfortunately, the class in td is deleted.
I want to be able to sort while maintaining the original attributes.
I wanna bring the search bar outside the table. How can I do that?
If data: is an array of objects, use the object keys to create the table header for use in labeling, as well as sorting.
numbers are sorted as strings, and it's necessary to add heading zero to make numbers with the same length to have the sort work as expected.
This is my code:
I include the libraries:
<script src="/Scripts/jquery-2.1.3.js"></script> <script src="~/Scripts/datatable.min.js"></script> <script src="~/Scripts/datatable.jquery.min.js"></script>and then I created the datatable like this:
$('#MyTable').datatable({
data: filterList,
pageSize: itemsPerPage,
sort:'*',
lineFormat: function (id, data) {
var res = $('<tr></tr>');
for (var key in data) {
if (key != "GroupId" && key != "GroupName" && key != "Number")
if(key==="Name")
res.append('<td><a href="/Project/Details/'+ data['Id'] +'">' + data[key] + '</a></td>');
else
res.append('<td>' + data[key] + '</td>');
}
$(res).attr('id', data['Id']);
$(res).dblclick(function () {
window.location.href = "/Project/Details/" + $(this).attr('id');
});
return res;
},
pagingDivSelector: '#projectPaging',
pagingNumberOfPages: 10
});
Can you please tell me what am I doing wrong? the datable is created and the arrows to sort the table are shown but when you click on it it just do nothing.
Thanks,
Alex Fernandez
When refreshing, ids change, so it will add problem with add / remove if user has a old id.
Hi,
I have 3 records exist in the datatable when the document is loaded. The filter and sort function is perform perfectly.
But when i try to add in a record using addRows function, i can see the record added inside the datatable but when
i try to perform filter function, it is always filter for the 3 records that is previously loaded only. And the sorting function
is broken. Any idea ?
I am calling .datatable on an existing HTML table that has hidden columns. These columns provide metadata about each row that I use in JavaScript processing. Calling .datatable removes all classes and element-level styling so that apparently I have no way of keeping these columns hidden. The thead element does not have a <th> for the hidden columns and I have set nbColumns to the number of visible columns.
Hello, I have a column that has a date in the format dd / mm / yyyy, but when ordering the column, I only take into account the day but not the rest of the date.
Any idea how to solve the problem?
user the plugin for
this throws a Nulllpointer exception in line 899 initializing filter.
to fix this I add a acondition in the line 165 as follow
if(this.data)
this.filter();
Backround: my table is a table to manage employees. So at first time i don't have any employee. click a button to create an employee, after saving i become data.
so more tests for an empty table throws more exception because the filter and sort are too data based. so to avoid this i put all this in the same condition
if (this.data) {
/* Add sorting class to all th and add callback. */
this.createSort();
/* Add filter where it's needed. */
this.createFilter();
this.triggerSort();
this.filter();
}
I use it in my project. But it not work.
`
$id_c = $list['id_class'];
$sql_c = "SELECT COUNT(id_sub) as num FROM relation WHERE id_class = '$id_c'";
$query_c = $db->query($sql_c);
while ($count_c = $query_c->fetch()) {
?>
<tr>
<td scope="row"><?php echo $i; $i++; ?></td>
<td><a href=""><?php echo $list['name_class']; ?></a></td>
<td><?php echo $count_c['num']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
$(document).ready(function(){
$('#MyTable').datatable({
pageSize: 15,
sort: '*'
}) ;
$('#MyTable').datatable('page', 3);
var data = $('#MyTable').datatable('select');
$('#MyTable').datatable('delete', function (e) {
return e.title.trim().length > 0;
});
});`
STT | Tên lớp học | Số môn đang học |
---|
Great job!
It would be desirable to have the ability to export to csv at least, and to pdf and xslx perhaps, all data on the datatable as the jQuery DataTables plugin.
Hello,
I have no clue about how to use my filter outside the table. I have created a select element
<select id="ASIN" class= "custom-select">
<!--
<option>ASIN</option>
<option>B0000934FH</option>
<option>B00009ABCD</option>
<option>B00009HYTD</option>
-->
</select>
This is what I'm trying to do
filters: {
_1 : { element : $("#ASIN"), values : {0: "B0000934FH", 1: "B00009HYTD"} },
I don't have an id for the column and ASIN is the id for my select element.
Please help
Thanks
Consider the table below, the search function for text input filter works fine on the first <td></td>
, but failed on the third <td></td>
. If I striped all the html tags inside the third td leaving just the text, the search works fine. Please advise.
<tbody>
<tr>
<td><a href="xyz/abc/"><strong>Title A</strong></a> <span class="badge"><small>0</small></span> </td>
<td><span class="label label-info">Cat A</span></td>
<td><small><a href="search/one+two+three">One Two Three</a></small></td>
</tr>
<tr>
<td><a href="xyz/abc/"><strong>Title B</strong></a> <span class="badge"><small>0</small></span> </td>
<td><span class="label label-info">Cat A</span></td>
<td><small><a href="search/one+two+three">One Two Three</a></small></td>
</tr>
<tr>
<td><a href="xyz/abc/"><strong>Title C</strong></a> <span class="badge"><small>0</small></span> </td>
<td><span class="label label-info">Cat A</span></td>
<td><small><a href="search/four+five+six">Four Five Six</a></small></td>
</tr>
<tr>
<td><a href="xyz/abc/"><strong>Title D</strong></a> <span class="badge"><small>0</small></span> </td>
<td><span class="label label-info">Cat C</span></td>
<td><small><a href="search/one+two+three">One Two Three</a></small></td>
</tr>
<tr>
<td><a href="xyz/abc/"><strong>Title E</strong></a> <span class="badge"><small>0</small></span> </td>
<td><span class="label label-info">Cat B</span></td>
<td><small><a href="search/asdf">Nine Ten</a></small></td>
</tr>
</tbody>
Hi,
I have a datatable in my project and i can't display the number of row in the first column of my table; how to get the number (position) of any row?
here's my code:
$('#myTable').datatable({
data: json,
identify: 'field1',
lineFormat: function (id, data) {
var tr = $('<tr></tr>') ;
// First <td> element, here display number of row.
tr.append('<td></td>') ;
tr.append('<td>'+data['field1']+'</td>') ;
tr.append('<td>'+data['field2']+'</td>') ;
tr.append('<td>'+data['field3']+'</td>') ;
return tr ;
}
});
Consider: when delete rows using $('#myTable').datatable('delete', id);
or add new rows $('#myTable').datatable('insert', json);
the numbers of table rows update automatically, is there a way to do this ?.
thanks.
When a datatable is configured to retrieve data with GET method, parameters "offset" and "limit" are not present.
Can we add a filter in all 'th' automatically similarly as we are doing for sorting?
$('#example-table1').datatable({
pageSize: 20,
sort: '*',
filters: [true, true, true],
filterText: 'Type to filter... '
});
Hello,
I want to use datatable.js for a table in which every row has a data- element.
When I use datatable they get removed and replaced by the data-id element.
How can I rescue them and let datatable inject them in the newly created table?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.