Update table data

[diclonius]

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.

[Holt59]

@diclonius How you update a record and reload the table? Could you show some code?

[diclonius]

Hi, thanks for your response.

I am using ASP.NET, I use the UPDATE PANEL to update the table.

With PHP I use the $ ajax function of jquery to update the data in the table. It tries to add the registers, but it does not work either, the filters take the previous data.

[Holt59]

What do you do exactly in $.ajax function of jquery? Do you call addRow / addRows on the table or do you delete/recreate the table?

[diclonius]

I recreate the table when I use $ .ajax. Also when I use the UPDATE PANEL of ASP.NET Webform, the table is recreated.

[diclonius]

This is my Code

        $('#TableBstt').datatable({
            pageSize: 11,
            sort: [true, true, false],
            filters: [false, true, false],
            filterText: 'Escribe para Filtrar... ',
            pagingDivSelector: "#paging-first-datatable",
        });

In addition to recreating the table, I have tried the following:

    function add_data_table() {
        var markup = '<tr data-id="6"><td data-th="code">100</td><td data-th="Country">Other Country</td><td data-th="Default">Not</td></tr>';

        $("#TableBstt").append(markup);
    }

[Holt59]

You need to use the methods available on the datable, e.g.:

$('#TableBstt').datatable('insert', new_data);

[diclonius]

Thank you very much, I had not found these Syntax in the documentation. Is it also possible to edit and delete?

Can you recommend me something to do the data filling of a web service?

[Holt59]

Yes, you can delete and edit row if you have a way to identify rows, e.g., a "id" attribute. In this case, you can do:

$('#TableBstt').datatable('delete', itemId);

And:

$('#TableBstt').datatable('update', itemId, newItem);

You can change the way item are identified by setting the identify option when creating the datatable:

$('#TableBstt').datatable({
    pageSize: 11,
    sort: [true, true, false],
    filters: [false, true, false],
    filterText: 'Escribe para Filtrar... ',
    pagingDivSelector: "#paging-first-datatable",
    identify: "id"
});

This is document at the bottom of the page: http://holt59.github.io/datatable

[diclonius]

Thank you very much for your help, I tried to use the Insert, but I could not, can you guide me? Sorry for my ignorance.

I have tried the following:

$('#TableBstt').datatable('insert', ['200', 'EEUU', 'Testing City', 'Other Data'])

And

$('#TableBstt').datatable({
   insert: ['200', 'EEUU', 'Testing City', 'Other Data']
});

[Holt59]

I think the plugin recognize your array as if you wanted insert multiple records... You can try:

$('#TableBstt').datatable('insert', [ ['200', 'EEUU', 'Testing City', 'Other Data'] ])

[diclonius]

It is not effective :(, I notice that the table is recharged, but it does not add the record, I have it this way:

function add ()
{
$ ('#TableBstt'). Datatable ('insert', [['200', 'USA', 'Testing City', 'Other Data']])
}

[Holt59]

I would need a more complete example to be able to help you further. Do you notice anything in the JS console?

[diclonius]

This is my code:

In the Head

    <link href="../css/datatable.min.css" rel="stylesheet" />
    <script src="../js/datatable.min.js" type="text/javascript"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/datatable.jquery.min.js" type="text/javascript"></script>

In the Body
<a class="new" onclick="add();"><i class="fas fa-plus-circle"></i><label>Add Row</label></a>

<div class="table-content">
	<table id="TableBstt" class="datagird" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<th>Código</th>
				<th>Pais</th>
				<th>Departamento</th>
				<th>Municipio</th>
			</tr>
		</thead>
		<tbody id="TableBsttBody">
			<tr>
				<td>1</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>2</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>3</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>4</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>5</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>6</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>7</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
			<tr>
				<td>8</td>
				<td>AAAA</td>
				<td>BBBB</td>
				<td>CCC</td>
			</tr>
		</tbody>
	</table>
</div>
<div id="paging-first-datatable" class="paginate"></div>

    <script>

        $(document).ready(function () {

            $('#TableBstt').datatable({
                pageSize: 5,
                sort: [false, true, true, true],
                filters: [false, 'select', true, true],
                filterText: 'Escriba para Filtrar... ',
                pagingDivSelector: "#paging-first-datatable"
            });

        });

        function add()
        {

            $('#TableBstt').datatable('insert', [['200', 'USA', 'Testing City', 'Other Data']])

        }

    </script>

[Holt59]

The problem is the select filter you use I think. Since you specify 'select' , the plugin lookup all the values in the corresponding column and create a filter using them. When you insert 'USA', the plugin filter the row out and thus the row is not displayed...

You need to either:

• update the filters after the insertion (this will clear the current filter unfortunately... ):

$('#TableBstt').datatable('option', 'filters', [false, 'select', true, true]);

• use a text filter instead of a select one (use true instead of select);

• specify all the possible values for the select when creating the datatable;

• use a custom HTML <select> elements that you populate the way you want.

[diclonius]

Thank you very much, I will do the tests and then I will comment on how it came out.

[diclonius]

Hello again. I have tried the routine of adding in PHP and it works perfectly, I do not understand why ASP.NET WEBFORM does not work.

Now I have another question. How can I update a record in the table? I have.

$ ('# TableBstt'). Datatable ('update', itemId, newItem);

But it is not clear to me whether the itemId is the selector of the column or the index of it, that is, how I can identify the exact cell I want to update.

[Holt59]

@diclonius There are examples at the end of this page: http://holt59.github.io/datatable (sorry, anchors do not work... ).

Basically, you need to specify when constructing the table how you want to identify the elements, e.g.:

$('#TableBstt').datatable({
    identify: 0 // Identify elements according to the first (0th) column.
});

If your elements are objects, you can specify a key instead (e.g., 'id'). You can even specify a function of the form (there is an example at the end of the link):

function (id, element) {
    return /* true if id match element */;
}

Then you simply do:

$ ('#TableBstt').datatable ('update', 7, newElement);

...to update the element whose first column value is 7.

[Holt59]

Also note that you can partially update element this way, e.g.:

$ ('# TableBstt'). datatable ('update', 7, {
    1: 'FOO'
});

...will only update the 2nd column with "FOO". This is more usual with Object but should work with Array elements.

You cannot update the ID of an element this way, e.g.:

$ ('# TableBstt'). datatable ('update', 7, {
    0: 6
});

...will do nothing if identify is set to 0 when creating the table.

[diclonius]

Thank you, perform tests and I will be feeding back.