create links in dynamic table fields

Question

im new to Javascript and im struggling with this question for a while.

I have a dynamic jquery table and my goal is to hyperlink one row of that table (the row data) to a .php page to make some queries.

My objective is something like this:

for example, in the table

   data       info         money          name          ID
 20161001   ...           34            test         1010
 20161002   ....          20            dddd          111
 20161003    ...           12            ....        .....

users could press 20161001 or 20161002 and this would link to a detailed table with all the info of this day

My first problem is to reach the object inside the array of data.

Every time i try to reach data i got something like : [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

The only way i could reach them was from:

 JSON.stringify(data[i])

i made a for statement but this return all the info from table and i just need the data from the row: Data.

for my dynamic table i get the headers from :

    var keys=[];

              for (var key in data[0]) {
                keys.push(key);
                  }

I also try to combine this 2 ways to reach the info but no success.

My ajax code:

$.ajax({
                      type: 'post',
                      url: "data.php",
                      dataType: "json",
                      data: $(this).serialize(),

                      success: function(data) {
                           console.log(data);


                              $('#btn-load').click(function(e) {



                                var keys=[];

                                for (var key in data[0]) {
                                    keys.push(key);
                                }


                                dt = dynamicTable.config('data-table', //id of the table
                                                         keys, //field names
                                                         null, //set to null for field names to be used as header names instead of custom headers
                                                         'no data...');

                                    dt.load(data);
                        });

(Dynamic table with code of this page: Dynamically update a table using javascript)

I need to reach this info, link him and pass the value into a php page.

I don't know if this method is the more appropriate so if someone can give me some lights i would appreciate.

Thanks

i Will pass the Data as a String to use on querie...for example, all the datas will link to a .php page , and that php page will receive the value of data to a querie. — No_idea
– No_idea, Commented Oct 29, 2016 at 13:45

Rajshekar Reddy · Accepted Answer · 2016-10-29 13:53:27Z

0

Assuming you want to pass the first column value of the row into your php function you can just try this.

Bind a click event to your table tr using event delegation (as you said it's a. Dynamic table) and extract the first td value on click.

$("#yourTableId").on("click","tr",function(){
   var data = $(this).find("td:eq(0)").text();
   alert(data); //test
});

edited Oct 29, 2016 at 13:53

answered Oct 29, 2016 at 12:47

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

No_idea Over a year ago

Gonna try this when i reach home, but makes sense ;) . thanks

No_idea Over a year ago

Do you know one function that can be inserted inside the one you gave me to link to a .php page ?' I have try the "fnRowCallback" but with no sucess

Rajshekar Reddy Over a year ago

The above script must work. I assume you are using DataTables plugin.. so when ever you page , sort etc there are new tr elements drawn into table.. Also to get the data from a dataTable row there is a different syntax.

No_idea Over a year ago

the above code will give me the data of the <td> as string and that works 5 stars, my problem now is to link that td to a php page. For example, the table is generated and have datas, i click on a data field and redirect me to a php page ( and send the data to use in querie)

No_idea Over a year ago

Ok, finally done. Thanks for the big help Reddy , i could finalize the data this way : dt.load(data); $("#data-table").on("click","tr",function(){ var data2 = $(this).find("td:eq(0)").text(); window.open("teste.php?data2="+data2,'_blank','toolbar=0,location=no,menubar=0,height=400,width=400,left=200, top=300');

|

No_idea · Accepted Answer · 2016-10-31 15:24:42Z

-1

                          $("#data-table").on("click","tr",function(){

                                           var data2  = $(this).find("td:eq(0)").text();


                                           window.open("teste.php?data2="+data2,'_blank','toolbar=0,location=no,menubar=0,height=400,width=400,left=200, top=300');  
                                           console.log (data2);

Thans for the help Reddy . This solve the problem, i pass the data trough the Window.open ;)

answered Oct 31, 2016 at 15:24

No_idea

197 bronze badges

Collectives™ on Stack Overflow

create links in dynamic table fields

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related