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?

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.

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?

user the plugin for

• an empty HTML-Table (no rows)
• the options data attribute is not defined
• define filters for some cols

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();
} 

Its not working. When i sort tables, then it show pagination but filter still not present.

Screenshot:

Tested with: IE 11 under Win 7

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.

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... '
});

This is my code:

I include the libraries:

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

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  >   >>>

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?

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 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,
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!

I am add both datatable.css and datatable-bootstrap.css but the style is not active for pagination

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!!!

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

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

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.

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.

Example Use Case

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.

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 
      

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.

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.

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.

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?

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!

I wanna bring the search bar outside the table. How can I do that?

When a datatable is configured to retrieve data with GET method, parameters "offset" and "limit" are not present.

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.

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.

If data: is an array of objects, use the object keys to create the table header for use in labeling, as well as sorting.

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?

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>&nbsp;<span class="badge"><small>0</small></span>&nbsp;</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>&nbsp;<span class="badge"><small>0</small></span>&nbsp;</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>&nbsp;<span class="badge"><small>0</small></span>&nbsp;</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>&nbsp;<span class="badge"><small>0</small></span>&nbsp;</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>&nbsp;<span class="badge"><small>0</small></span>&nbsp;</td>
        <td><span class="label label-info">Cat B</span></td>
        <td><small><a href="search/asdf">Nine Ten</a></small></td>
    </tr>
</tbody>

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;
		});
	});`

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?

To work around this I use $timestamp.

It ’s interesting. Well done!
Unfortunately, the class in td is deleted.
I want to be able to sort while maintaining the original attributes.

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]

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.

When refreshing, the current page should not be changed.

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.

When refreshing, ids change, so it will add problem with add / remove if user has a old id.

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')