How can i create "Custom child row renderer" with number of rows flexible?!

Coeficiente

I copy the all code of this page and try test for see if it works, i got this result.
Also i am trying make a table, and when i click in the row, i open a subtable(or child row) with inherited data. Like this or even like this (i would like, if it's possible, do like the last one) a table into a table, yes, exatcly like this(and also, i make this image on paint...).
So, the subtable can have distinct number of rows, thats why i want to be a subtable, not a child row, when i try with disctinc numbers of rows, obviusly, doesn't work and bug the entire table.

Js code for table:

$(document).ready(function() {
    $('#TabelaGerenciar').DataTable( {
        responsive: {
            details: {
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return col.hidden ?
                            '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>' :
                            '';
                    } ).join('');

                    return data ?
                        $('<table/>').append( data ) :
                        false;
                }
            }
        }
    } );
} );

Also: Works with one data and that things, so isn't importing thing here.
I also have another questions, because i'm trying to select row id, for delect things, but this it's for another post, if necessary...

Oh... i also forgot, i already try change js code or things like this, i am face the problem now and my inexperience don't let me know how move on with this.

colin

Hi @Coeficiente ,

This thread should help, it's asking the same thing.

Cheers,

Colin

Coeficiente

Hi there @colin ,
So, i already read this thread, do not help me, because i am using django, isn't fixed data, thats why i want something more flexible. You may not get it my problem.

Also that already working, i know how puta subtable and use it, but i dont know how make that subtable get flex items, i will use your example link.
One name have three Extension Nunbers but they are the same, i want a way that a name can have how many Extension Numbers he needs, show them, and flex the table how it needs too.

You might can give me some resource about, library or command that would help me.

What i specific need

A algoritm that make how many <td>(or if it's another way, tell me) i need, in anyway it's possible, like, i can insert this data in many ways, wich it's possible do this i will consider as a solution.

Also i will let here for all will try help me, how it's working. I want that way, with many another rows, and another <th> in thead

kthorngren

i dont know how make that subtable get flex items

Where are these flex items located? Are they in the row data? Do you need to fetch them form the server using ajax?

Kevin

Coeficiente

hey , @kthorngren ,
They are in django DataBase, wich means i can use them wherever i want, but, for print/use them in the way i want, i need make a two loops for send it in the wright way, let me make a example for how i want to do:

Think in shopping list, now think in a datatables with your all shopping lists. You have the id of the shopping list and when you click in the '+' icon, you open a subtable with the all procuts you have in this shopping list, with all data... Date, cost, amount, etc.

I will delete, edit in this table, and send data for another page, in a simple way maybe.

Also for use that data, i need the loops for separate the procuts for their shopping list ID. (I know i can put into a array, but that isn't smart, will be big data here).

kthorngren

I'm still not clear on what you are trying to achieve. The code in your first post shows using responsive. Is that what you want to use? It doesn't seem to me that responsive is what you want.

So, the subtable can have distinct number of rows, thats why i want to be a subtable, not a child row, when i try with disctinc numbers of rows, obviusly, doesn't work and bug the entire table.

This blog discusses using two Datatables with the second containing rows based on the row selected in the first table:
https://datatables.net/blog/2016-03-25

Another option is to use child detail rows as shown here:
https://datatables.net/examples/api/row_details.html

This blog entry describes how to use child detail rows as a Datatable with Editor:
https://datatables.net/blog/2019-01-11

Additionally you can ajax load the child details as described here:
https://datatables.net/blog/2017-03-31

Kevin

Coeficiente

@kthorngren sorry, what you can't understand? I can explain again...
I already make many examples, but i will make again.
This
explain in a visual way for you.

Why do not I make this ?! because it's inconvenient, will break the code very fast with big data or load with decades, and will get me troubled easily, also i don't want to create new data here, i want to get id and use in another page. For delete ... but get id(or transform in another thing, with the id) and delete it's more simple. For edit, I am thinking in the same way that I said about creating. Also will provide the image as link, for disengagement of conscience.

Also: I am getting you all so close of the project, why can anyone understand what i am trying to say? I am exemplifying wrong? I thought things were usually like this....

Edit: Two tables aren't practical and fast.

kthorngren

Based on tis my understanding is you want to use Child Row Details and not responsive as you have in your first post.

Object 02 is the data in the Child Detail Rows. Are you wanting the ability to edit this data?

Basically there are two choices for retrieving Object 02 data:

1. You can attach all the Object 02 data to each Object 01 row and return it from your Django script. You don't need to display it in the main table but can access it to display in the Child Details.
2. You can fetch the Object 02 data for the row when you click the plus to display the Detail information.

When displaying the Child Row Detail data you can:
1. Use the format function (shown in the example) to build the HTML the way you want.
2. Create a Datatables instance to display the data, here is an example:
http://live.datatables.net/gohefoki/1/edit

Does this help or am I still missing what you want to do?

Kevin

Coeficiente

@kthorngren i'm sorry, what is "responsive" in your perspective?! When you mean responsive, you speak like a plug in or another way to do it, for me it's something different responsive talble.

That example you linked, it's very similar to what i want, but it's crucial that i can put many rows(in the subtable or child row), and the number of rows need be changable. So, with the test i have made in your link, still dosen't working.

As i told in the past answers, One Object 01 CAN have Many Object 02 .
That means the child row NEED to recieve, just one Object 02 or can recieve a hundred. Sorry, but i need to focus on this sentence, because without this i can't move on with my project.

1. How i can fetch the Object 02 with Object 01?! if you are saying what i am thinkig, it is out of the question at the moment make a GET request in django when click in the plus button. Will be slow and toilsome.
2. The Object 02are already in this way, by Foreing Key, but i display them separately because they are different objects.
3. As you can see, all the examples you gave me, it's showing FIXED DATA (Wich means all subtables or child rows will be forever with the same number of rows), that's the crucial part, i need to be flexible data.

So, i say it many times and i am still saying in the post the same thing, i already explain my problem, and request what the type of thing i need, but i can't understand why it's so hard and complex to just point your finger in the right direction for me. It's just the same thing in all your links, but with variable number of rows. It's impossible that nobody use it in this way.

Also: I am whereas surrender use datatables and make an table for my own, because in the beggining i was close to make it work, and stoped it. beucase i had already used datatables on another page and thought it would be simpler and useful to use again.

Also 2: the link provide just one row, if you know how provide more rows will be a solution, if accepts the condition a already said.
Thanks for trying help, i appreciate it, still here if you find a solution or a right direction.

Nicolas

colin

@Coeficiente - please be aware that most people replying on this forum are doing it in their own time, and are trying to be as helpful as they can. Your questions haven't had the clarity where they can be easily answered, hence the confusion. Please be patient and explain when explanations are requested, that path will help you get the best support.

kthorngren

Sorry, that I'm having a difficult time understanding your specific requirements. Since they are not clear to me I'm pointing you to a lot of options that hopefully you can figure out which will work.

In my first question I asked where the "flex" (Object 02) items are to understand where to fetch the data from. It hasn't been clearly expressed to me how you expect to access this data.

The Object 02are already in this way, by Foreing Key, but i display them separately because they are different objects.

Does this mean they are fetched and available in some form (Javascript variable, Part of the returned row data for your main Datatable, etc) in the client?

As you can see, all the examples you gave me, it's showing FIXED DATA (Wich means all subtables or child rows will be forever with the same number of rows), that's the crucial part, i need to be flexible data.

I agree that the last example I provided uses static data from the table. If you look close you will see that the example uses Javascript data to populate the child Datatable - meaning it can have any number of rows. Lets have a closer look at the code that opens the child Datatable:

     else {
       // Open this row
       row.child(format(rowData)).show();
       var id = rowData.name.replace(' ', '-');
          

        $('#' + id).DataTable({
          dom: "t",
          data: [rowData],
          columns: [
            { data: "name", title: 'Name' },
            { data: "position", title: 'Position' },
            { data: "extn", title: 'Extension' },
          ],
          scrollY: '100px',
          select: true,
        });
        
        tr.addClass('shown');
      }

The first thing it does is create the child table using the format function:

  // Return table with id generated from row's name field
  function format(rowData) {
    return '<table id="' + rowData.name.replace(' ', '-') + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
           '</table>';  
    }

The row data is passed to it simply to extract a unique data column for the child table ID. The Child table is created.

Next it initializes the Datatable using data: [rowData],. Yes, rowData is extracted from the row but it could be any Javascript array of data or other data in the row data not displayed in the Datatable. Its inside [] because it is only one row and the data requires an array of rows.

Here is another example showing how to use ajax to fetch the child row data. Its not a terribly good example so I didn't originally show it to you. I commented out some code to show that the child table can display many rows.
http://live.datatables.net/masehowo/1/edit

Please understand these are just simple examples I created to post in other threads. They are generic in nature and are limited by the available backend resources form live.datatables,net.

Kevin

Coeficiente

@kthorngren I'm sorry, it's frustrating can't be understood... But moving on

So, with the test i have made in your link, still dosen't working.

Here i say that i already test it, and my test was trying to put two rows in the child row/subtable. I know that examples it's just for see if it works and replace with your own code for work the way you want, and it's just becaus of that i am trying to find someone that used that code in this way for teach me how use it.

That example you linked, it's very similar to what i want

According to my test I can not see how to do it, can you give me an example that is equal like this?! Would be a solution.

Thank you for helping me.

Nicolas

kthorngren

I've provided examples that show multiple rows in the child Datatable. Like I mentioned before the variable supplied in the data option will contain the data to add to the child Datatable. It needs to be an array and in the array are the row or rows you want to add. I updated my first example with some Javascript data (in the variable object2) to show multiple child rows.
http://live.datatables.net/kacafize/1/edit

And changed this portion of code:

        $('#' + id).DataTable({
          dom: "t",
          data: object2,
          columns: [

To populate the child Datatable. Does this help?

How you populate object2 is up to your environment.

If you are still having trouble maybe you can post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Coeficiente

@kthorngren My question didn't post..

Thanks for patience, perseverance and time, that will help me so much!

But, still with a detail, when you say to array, you mean sotre the django data in a array for pass here:

  var object2 = [
    {
      name: 'name1',
      position: 'position1',
      extn: 'extn1'
    },
    {
      name: 'name2',
      position: 'position2',
      extn: 'extn2'
    },
    {
      name: 'name3',
      position: 'position3',
      extn: 'extn3'
    },
  ]

for print in the table, right?!
Can i store Object 01 as the same way you store Object 02 ?

I want to print the data like this, but it's different. Like, the first row it's right, however the following lines aren't. Need be:

• Name: name4, name5, name6
• Position: position4, position5, position6,
• Extension: extn4, extn5, extn6
• And the next continuing like this up

Thank you!
Nicolas.

kthorngren

Name: name4, name5, name 6

Are you saying the columns may have array based data? If so I believe something like this would work to extract the array and display as comma separated values:

     columns: [
       { data: "name[,]", title: 'Name' },

When you say array, you mean like, store data in array for use in the part that you store the data

Datatbles expects the row data to be in an array. It can be an array of arrays or array of objects. For more info:
https://datatables.net/manual/data/#Data-source-types

If you have further questions about data structures please post an example of what you have. This way we can provide more specific answers. Or better a simple test case that we can help you work with.

Kevin

Coeficiente

@kthorngren Hi there,

The code it's here, based on your examples and tips.
How can i make in this way?

                {
                  "name":     "Alisson Costa",
                  "position": "Seller",
                  "office":   "8422",
                  "salary":   "$5,300"
                }, Columns {
                  "name3" - "pos3" - "exts3"
                  "name4" - "pos4" - "exts4"
                },
                {
                  "name":     "Nicolas Zim",
                  "position": "System Architect",
                  "office":   "5421",
                  "salary":   "$3,120"
                }, Columns {
                  "name1" - "pos1" - "exts1"
                  "name2" - "pos2" - "exts2"
                {

• Note that it's just example for you can understand me.
• Remember that i will populate this with loops.

I want the columns be different by id.

Thank you and your time have been really useful for me.

Coeficiente

@kthorngren
it's almost ending, just need this to finalize the code. I already make the tests in my project and it's working almost like i want, just for the detail above.

• Also: I already make the loops with django and works well too.

kthorngren

Good glad you have it working.

Kevin

Coeficiente

@kthorngren Sorry, how can i make it, like the code, below this

How can i make in this way?

in the previus post.
Because the way i am doing it's repeating the same data in all child rows.

• If you have resources will be great.
  Nicolas

kthorngren

I would consider building Object2 as an object with the keys being the values from a columns with unique data, like an ID or in your example name. Each key would contain an array of items for that row. For example:

{
    {"Alisson Costa":
        [
          {
            name: 'name3',
            position: 'position3',
            extn: 'extn3'
          },
          {
            name: 'name4',
            position: 'position4',
            extn: 'extn4'
          }
        ]
    },
    {"Nicolas Zim":
        [
          {
            name: 'name1',
            position: 'position1',
            extn: 'extn1'
          },
          {
            name: 'name2',
            position: 'position2',
            extn: 'extn2'
          }
        ]
    },
}

In the row open code use that unique data point to get the specific data for that row, for example:

else {
  // Open this row
  row.child(format(rowData)).show();
  var id = rowData.name.replace(' ', '-');
      
  var unique = rowData.name;  // Get the unique key 
 
   $('#' + id).DataTable({
     dom: "t",
     data: object2[unique],  // Get the specific data for the row
     columns: [
       { data: "name", title: 'Name' },
       { data: "position", title: 'Position' },
       { data: "extn", title: 'Extension' },
     ],
     scrollY: '100px',
     select: true,
   });
    
   tr.addClass('shown');
 }

Kevin

Coeficiente

@kthorngren I'm really sorry for make this post too long, but seems doesn't work with me, i am doing something rong?!

The Code it's here.
If i change the [] for {} in Object2 code(like you said to do), the **JS ** stop working at all.

kthorngren

Sorry my syntax for object2 was incorrect. Here you go:
http://live.datatables.net/bunavuvu/3/edit

Kevin

Coeficiente

@kthorngren Sorry, still doesn't working, it's now showing any data.

Also, I do not know what you changed, it seems to me that you sent the wrong link.

Nicolas

kthorngren

Not sure what happened. Made the changes again here:
http://live.datatables.net/bunavuvu/5/edit

Kevin

Coeficiente

@kthorngren Ohhhhhhhhhh, Now i see what changed.

• So i will make this last post bigger than others for documentantions reasons, ok?
• Also i thank you for all time and patience you have with me, and for share your knowlage and resources.

So, my problem solved by this test code, and i will let here too, in the case the page get off.

data code:

      var data = [
            {
              "name":     "Nicolas Zim",
              "position": "System Architect",
              "office":   "5421",
              "salary":   "$3,120"
            },
            {
              "name":     "Alisson Costa",
              "position": "Seller",
              "office":   "8422",
              "salary":   "$5,300"
            }
        ];

Object2code:

    var object2 = {
    "Alisson Costa":
        [
          {
            name: arr[1][1],
            position: arr[1][2],
            extn: arr[1][3]
          },
          {
            name: arr[2][1],
            position: arr[2][2],
            extn: arr[2][3]
          }
        ],
    "Nicolas Zim":
        [
          {
            name: arr[3][1],
            position: arr[3][2],
            extn: arr[3][3]
          },
          {
            name: arr[4][1],
            position: arr[4][2],
            extn: arr[4][3]
          }
        ],
    }

Also the problem was the object syntax builted above.

the rest of code for open, close, and other things of the table configurations:

  // Return table with id generated from row's name field
  function format(rowData) {
    return '<table id="' + rowData.name.replace(' ', '-') + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
           '</table>';  
    }



var table = $('#example').DataTable( {
    data: data,
    columns: [
      {
         className: 'details-control',
         orderable: false,
         data: null,
         defaultContent: ''
      },
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ],
      order: [[1, 'asc']],

} );

  // Add event listener for opening and closing first level childdetails
  $('#example tbody').on('click', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = table.row( tr );
     var rowData = row.data();


     if ( row.child.isShown() ) {
       // This row is already open - close it
       row.child.hide();
       tr.removeClass('shown');

       // Destroy the Child Datatable
       $('#' + rowData.name.replace(' ', '-')).DataTable().destroy();
     }
     else {
       // Open this row
       row.child(format(rowData)).show();
       var id = rowData.name.replace(' ', '-');

       var unique = rowData.name;  // Get the unique key

       $('#' + id).DataTable({
          dom: "t",
          data: object2[unique],  // Get the specific data for the row
          columns: [
            { data: "name", title: 'Name' },
            { data: "position", title: 'Position' },
            { data: "extn", title: 'Extension' },
          ],
          scrollY: '100px',
          select: true,
        });

        tr.addClass('shown');
      }
  } );

I also thanks for datatables.net for create a forum support for people search for what they need!

Nicolas

kthorngren

You are welcome. Glad you got it working!!

Kevin

Coeficiente

@kthorngren Hello again, the code isn't working in my project, but in the another site for test code it's working perfectly, but i don't know what i am missing...
My StackOverflow Code it's here
CodePenand the another One too.

Also, why do you need all that imports? I delete like six of them, and still working on the website test project. Can you send me the minimum imports that needs to work ?!

My PasteBin code it's here too.

kthorngren

Also, why do you need all that imports? I delete like six of them, and still working on the website test project. Can you send me the minimum imports that needs to work ?!

Like I explained before it is a generic demo which probably cam from something using the Editor. All that is needed is the base Datatables (JS and CSS) code.

but in the another site for test code it's working perfectly, but i don't know what i am missing.

In the SO thread you posted a screen shot that shows $(....).DataTable() is not a function. This means you are not loading your JS files correctly.

Kevin

Coeficiente

@kthorngren Still doesn't working . See here.

The script and html code is the same as the CodePen.

kthorngren

There isn't enough info in the screenshot to help debug. I would start by using "View Source" to take a look at the page rendered by your code. Does that look correct?

Kevin

Coeficiente

@kthorngren Seems the problem it's here
But, i used my backup to turn back and try again for see what was getting me in trobule. So the imports seems ok, but for this particular command it's not working.(Maybe for a missing import).

Also i only get the error when i try click in the "+" row, that also isn't in visually here, but works as if it were. I can click and open, but don't get anydata, see here.

Can i change .DataTable({}) for var table? Because in code, table stores this:
var table = $('#example').DataTable