Render each array data on same column

Render each array data on same column

PlaxmaPlaxma Posts: 9Questions: 2Answers: 0

Hi,
Is there anyway that I can render array of data that come from database on same column
Can anyone help me, I'm very noob when it come to java language.

This is expected result (achieve from php):

But this is what I currently get (jQuery datatables):

Code:

columnDefs: [
{
targets: 2,
render: function (data, type, row)
{
return '<span class="badge badge-pill bg-green-800 text-white">' + data + '</span>';
},
},

That code work to render 1 line of column as "Role" in picture. It's doesn't split to render each "Ability" like expected result

Thank you

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    You will need a render function for the Ability column. If the function was the same as the one for the Role column you could use targets: [2. 3]. But it looks like it will be different for 3. So you need a another columnDefs option for targets: 3. Looks like data is an array. You would need to write a Javascript loop to iterate the array and build the buttons string. Then return the string.

    Kevin

  • PlaxmaPlaxma Posts: 9Questions: 2Answers: 0

    Any guide on how to write loop function?

    Thanks,

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Here you go, an example based on the above data:
    http://live.datatables.net/kovipoda/1/edit

    I used badge-primary instead of badge-pill but you should get the idea.

    Kevin

  • PlaxmaPlaxma Posts: 9Questions: 2Answers: 0

    Hi, thanks.. The looping example work,
    I also has tweak the code (try & error) to render array of data.
    I tried to change the code to use datatables api each & every as well
    But none of them success..

    Idle it return blank.. Or looping each data like picture above:

    Any idea

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    My guess is what looks like an array in your screen shot ['Edit Data', 'Delete Data', 'See User'] is actually a string, like this example:
    http://live.datatables.net/kovipoda/3/edit

    So you will need to parse the string. You may be able to use JSON.parse() like this:
    http://live.datatables.net/zunerudu/2/edit

    Note that I put a console.log statement in the render function to see what data is. You may need to do the same with your specific data.

    Kevin

  • PlaxmaPlaxma Posts: 9Questions: 2Answers: 0
    edited September 2019

    Hi Kevin, thank you so much.. I do search overnight to find possible outcome..
    Some may said it's because the problem related to, I use map function to call data from database.
    Since I use console, the data itself already give me array of result. I think the first solution should work without using JSON. Since there's an error using JSON

    Forget to mention, thank you also for bonus tips, now I know targets: [2. 3] can be stack like this

    Here the solution that I used.
    In controller for eloquent call I add implode(',') so it will not return as array but instead result, result.
    In js, I use the first solution

    ! http://live.datatables.net/kovipoda/1/edit
    But add
    let dbData = data.split(',');

This discussion has been closed.