problems getting value from table into a function and reload ajax

crush123

I have a link in my table, which on click will run an update query via ajax using a couple of parameters, one a php get parameter and the other a value (itemid) from my datatable

Here is my code snippet so far…

// Update the source table
$('#example').on('click', 'a.set_aside', function (e) {
    e.preventDefault();
    var ItemID = editor.field('tblitem.ItemID').val();
    var WishlistItemID = "<?php echo $_GET['wishlistitemid'];?>";
    $.ajax ({
            url: '/plugins/shop/ajax/ajax_set_aside.php',
            data: {WishlistItemID: WishlistItemID, ItemID: ItemID},
            dataType: 'json',
            success: function (json) {
            //table.ajax.reload( null, false ) // user paging is not reset on reload
            table.ajax.url('/plugins/shop/ajax/ajax_items.php').load();
            }

            } );
 } );

This code is currently giving me 2 issues.
I can’t work out how to get the itemid value from the table, (I get it from the editor at the moment, (but this only works if I have previously opened the editor)).
The page does not reload the table data on success, (but after an F5, I can see the update has worked)

btree

Hi,

for the ID, do you want to get the ID from a selected row inside the table? I use the Buttons and select extension for this and use this code:

buttons: [
{
 extend: "selected",  //Button is only active if you select a row
 text: 'Name'
 action: function ( e, dt, node, config ) {
  json_function(dt);  //call your json function with dt as data for the selected row
 }
}

Inside the Json function:

function json_fucntion(dt) {
var obj = dt.rows( { selected: true } ).data(); //get selected rows
.....
dt.ajax.reload(); //reload table
}

With the reload i had the same problem, because he doesnt update the ajax data. You have to use a function otherwise he wont fetch new DOM data.

Here is my code

ajax: {
 url: "./secure/data_functions.php",
 type: "POST",
 data: function(d){return $.extend(buildSearchData(your_custom_data_variable),d)} //use function otherwise ajax.reload() wont fetch new DOM 'd' saves table data 

Function buildSearchData (code from the this forum) for your custom data you want to send with the table ajax.

function buildSearchData(your_custom_data_variable){
 var obj = {
     kind: kind, format: format, lang: lang, modus: $('#modus').attr('data-aid')
    };
 return obj;
}

Cheers
Hannes

crush123

Thanks Hannes,

I see what the button code is doing, using the fact that the row is selected to retrieve the data.

I don't think I can use it like this, as the link (or button) is rendered within the table, and only if it meets certain criteria. ie i don't want the button available on every row.

But if i can determine the row from which the link/button was clicked, that should do it.

So here we go...

$('#example').on('click', 'a.set_aside', function (e) {
    e.preventDefault();
    var data = table.row( $(this).parents('tr') ).data();
    var ItemID = data.tblitem.ItemID
    //console.log(ItemID);
    var WishlistItemID = "<?php echo isset($_GET['wishlistitemid'])?$_GET['wishlistitemid']:'-1';?>";
    $.ajax ({
            url: '/plugins/shop/ajax/ajax_set_aside.php',
            data: {WishlistItemID: WishlistItemID, ItemID: ItemID},
            dataType: 'json',
            success: function (json) {
            //table.ajax.reload( null, false ) // user paging is not reset on reload
            table.ajax.url('/plugins/shop/ajax/ajax_items.php').load();
            }

            } );
 } );

that will update my table via ajax, now i just need to redraw the table

crush123

Ok, I fixed it,

I had the ajax reload within the ajax success function, here is the working snippet...

    $('#example').on('click', 'a.set_aside', function (e) {
    e.preventDefault();
    var data = table.row( $(this).parents('tr') ).data();
    var ItemID = data.tblitem.ItemID
    //console.log(ItemID);
    var WishlistItemID = "<?php echo isset($_GET['wishlistitemid'])?$_GET['wishlistitemid']:'-1';?>";
    $.ajax ({
            url: '/plugins/shop/ajax/ajax_set_aside.php',
            data: {WishlistItemID: WishlistItemID, ItemID: ItemID},
            dataType: 'json'
            } );
            table.ajax.reload( null, false ) // user paging is not reset on reload
    } );

btree

Good job. :)

willfred

Hi all,

Sorry I am new to this forum and unaware of how to put the source codes as shown in your post. But here is my question and would be appreciative if you could enlighten me.

Desired outcome:
To click a link or button in the navbar(in this case: power) which would help generate the desired rows of result in the table, that falls under the column Category: Power Supply.

Currently, I am able to do so with the given coding below and Category is placed in the first column. By referencing the id given to "Power Supply" link. Copy the value and attached it to the search bar in my footer and search only in the first column(index=0)

$( "#power" ).click(function() { //By referencing the id given to "Power Supply" when click
$("input.search_init")[0].value = "Power Supply";
oTable.fnFilter( "Power Supply", 0 ); //Search in the first column containing power supply

Flaw:
If I were to shift the column Category to other columns, it will not work as before or desired.

Any advice?

allan

Flaw: If I were to shift the column Category to other columns, it will not work as before or desired.

You would need to update the column index that you are using to filter the table. Using the legacy fnFilter method as you are above means that it is filtering column index 0. if you move that column to column index 2, you'd need to change it to filter on that column index.

Allan

willfred

Hi Allan,

Thank you for your response :) I understood that by changing the column index in the coding, it will produce the right outcome.

However, I am intending to give users the privilege/flexibility to change the columns according to their needs. Hence, by changing the columns, the outcome will not be the same as before.

Any alternatives or functions to track where column Category falls in, according to the changes set by user for its column position which will then feedback to Javascript to detect and execute the filter for "power supply"?

Willfred

allan

Hi Willfred,

You can give columns names using the columns.name option at initialisation time and then use the columns() selector method with a name selector (column-selector) to select the column based on the name.

The other option would be to use a class to identify the column rather than a name. Either way, it sounds like you would need to be able to uniquely identify the column, regardless of its position. These or possibly the best two options at the moment.

Allan

willfred

Hi Allan,

Do you have any references/examples I could refer to, to understand your suggestions? I don't quite see the picture.

Also, would this alternative method be possible? By creating a function that traces the column index number and then input into the fnFilter method that it is filtering the respective column index. Any advice?

jLinux

@willfred

Do you have any references/examples I could refer to, to understand your suggestions? I don't quite see the picture.

If you just need to know how to use the columns.name as a column-selector in the columns(), I made a quick example:

http://live.datatables.net/kiyakexe/1/edit?js,output

willfred

Hi @jLinux

My case is more of linking the nav bar or buttons which is named after different categories. By clicking or selecting it, it will trigger the filtering of the data table.

To make your quick example as reference to better visualize what I am implying :

I have Technical Author, Director, System Architect as my buttons on the top nav bar.

 Technical Author   |   Director    |  System Architect

Assuming your table to have 100 entries. By selecting Director, the table will be filtered off and left only Director entries, with the other information in the row containing name, office, age and so on.

What I did was to reference the id i gave to the position and copy into my search bar to filter. In your case, it would be as such shown below:

$( "#post" ).click(function() { $("input.search_init")[1].value = "Position"; oTable.fnFilter( "Position", 1 ); } );

Flaw: If I were to shift the column Category to other columns, it will not work as before or desired. Hence, I want to make the coding flexible, regardless of the position of the columns, Javascript is able to interpret correctly.

How would I achieve that my desired outcome? Sorry Im new to coding, hence, pardon my pace of learning. I really appreciate your help in the quick example :)

allan

Two options:

1) You could use column names as suggested above - you would assign a data attribute to the column header so that can be used as the column selector. I don't normally create examples without priority support but its going to take longer to explain how to do this that to just write it I think: http://live.datatables.net/qavituhu/2/edit .

2) The other option would be to use the columnReorder event to know when reordering event has occurred. Detach the events listeners that were previously added and then add new ones (which will now work due to the new column index).

Allan

jLinux

And you said you wanted it so they could click a navbar or button or whatever, and have it filter that? I played around and came up with this, you can click on the position in the top and it will filter the position, regardless of where it is, or you can click on a cell, and it will filter the column, regardless of where it is... (Obviously picked up off of the example from @allan)

Its messy, I know, lol. Just wanteded to give you an idea.

willfred

Thanks allan and jLinux :) the examples were a great help to understand the concept better. I tried implementing it but there were some bugs that is stopping me from getting the same intent.

However, I managed to solve it with the function .filter to get the index no. of where the column is positioned at and assigning it to a variable. Lastly, attaching to the function I provided at the start.