0

So, i'm trying to create a custom button in my datatable table, but i'm not able to do it. I'll try to explain it.


Objective

I'm using DataTables to display a table with a lot of clientes, a basic table with just some basic information. In this table, on the same row of the cliente, i want to display 3 buttons. 1 for editing, 1 for view and 1 for exclude.


What i have

For the momment i have the data of the clients in a JSON file and i'm calling this JSON inside the DataTable Jquery plugin (code bellow). I have 2 ID's in my client JSON data, one is the Database ID (called ID) and the other is the system client ID (called CD). I'm using 2 ID's to prevent any errors in the DB so instead of have 2, 3, 6, 7, 8... I can make them all sequencial manually. Ok. Since the ID is not so important, i'm nothing using it to display on the table. I'm using the CD instead.


The problem

To edit/view or delete the client from the DataBase i need his ID, and to create the buttons i need a HTML code.

So my doubt is, how can i write this button to every single cliente and having his own ID inside the button? Here is a very simple code i use to view the clients data:

And this is a demo image i made in photshop https://i.sstatic.net/elGIM.png to show my final objective.


Code

Now, let me show you guys a little bit of code i have.

HTML (very very simple):

<table id="cfisico2" class="responsive" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>CPF</th>
            <th>Cidade</th>
            <th>Opções</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Jquery (calling the JSOn data and DataTables)

$('#cfisico2').dataTable({
    responsive: true,
    "bProcessing": true,
    "bServerSide": false,
    "aoColumns" : [
        { "mData": "id" },
        { "mData": "nm_cliente" },
        { "mData": "cpf" },
        { "mData": "cidade" },
        { "mData": "option" }
    ],
    "ajax": {
        "url": "data/c_fisico.json",
    },
    "dataType": "json"
});

And my JSON (with almost all the data i have of my clients):

{
    "aaData": [
        {
            "cd":0,
            "id":"C-0001",
            "nm_cliente":"Nome do Cliente",
            "cpf":"000.111.222-33",
            "nm_pai":"Nome COmpleto Pai",
            "nm_mae":"Nome Completo Mae",
            "tel":"00-9966-6699",
            "cidade":"cidade",
            "estado":"estado"
        },
        {
            "cd":1,
            "id":"C-0002",
            "nm_cliente":"Nome do Cliente",
            "cpf":"000.111.222-33",
            "nm_pai":"Nome COmpleto Pai",
            "nm_mae":"Nome Completo Mae",
            "tel":"00-9966-6699",
            "cidade":"cidade",
            "estado":"estado"
        }
        ---etc---
    ]
}

I was trying to find a solution, but i didn't.. The closes i found was this one here: https://www.datatables.net/examples/ajax/null_data_source.html

But since the unique ID from the DataBase is not being displayed on the table, i can't use it to delete the data.

I hope i can find another solution to this problem, i spent the whole day trying to find it.

Ps.: Sorry for my english, i'm from Brasil.


Edit: I was trying to solve my problem, and i came into this 'solution' but still didn't made it work.

So what i tried to do was to write a new var with jquery with a data string, then i'll call this var in the datatables, instead of calling the json file. This way i'll be able to call what data i want by just manipulating the var (or multiple var).

So i made this little code here:

var url = "data/c_fisico.json";
dataSet = '['
$.getJSON(url, function (response){
    $.each (response, function (index, table) {
        dataSet += '{"' + table.id + '","' + table.nm_cliente + '","' + table.cpf + '"';
        if ( table.cd <= 3 ) { //if used to avoid comma in the last string
            dataSet += '},'
        } else {
            dataSet += '}'; 
        }
    }); //end each
    dataSet += ']';
}); //end getJSON

With this code i'm able to write the string properly, but i can't make the datable load it.

Does anyone know how to do it? I already tried something like this:

$('#mytable').dataTable({
    data: dataSet,
});
7
  • Can you please tell us what is "cd":1 and "id":"C-0002" in your "aaData" and "mData": "id" in your "aoColumns". There should be some reference to your data so that it can be referred from your table to update or delete Commented Mar 27, 2015 at 6:30
  • "cd":1 is the unique id from the DataBase; | "id":"c-0002" is the custom id i use to identify my clients. It can also be P-002 and so on... "mData" : "id" will render like this: ID = C-002. Example here: i.imgur.com/XfnENZF.png I'm not using the "cd" because sometimes it's not sequencial or doesn' represent the custom client identification, It would show 24, 25 instead of C-0023, P-0015. Can you understand now? Hope so :) Commented Mar 27, 2015 at 11:40
  • Ok! Got little bit idea. If you are not rendering "cd:1" anywhere with your <td> for each data then it would be very difficult to manipulate your data with DB say edit or delete. So you need to have your unique identification appended with your table. Hope you got me. I can provide you with edit and delete buttons by rendering each edit and delete with table data and extra data-* attribute with it.. Hope you understand! Commented Mar 27, 2015 at 12:55
  • Yes, this is the problem.. I can't render the CD in the table because it's not useful for the user, only for the back-end. The code for edit/delete i already have it working, so no rpoblems with that. The only problem is to create the button, with custom class, etc.. And have the ID to each button. Do you know if is there a way to call the data from the json but keep it on the ajax? Because there is one link using a 'data[0]' and data[5] to call some data from the table. If not, i'll have to write the code in the JSON with PHP. Commented Mar 27, 2015 at 13:18
  • 1
    There is no problem. We are all here to try to help/learn. =D Thank you for your effort. Commented Mar 27, 2015 at 19:39

1 Answer 1

3

If I understand correctly, you're trying to display client data, with edit/delete buttons on each row. The buttons must have the client id assigned to them. Is that right?

If so:

$('#cfisico2').dataTable({
    responsive: true,
    "bProcessing": true,
    "bServerSide": false,
    "aoColumns" : [
        { "mData": "id" },
        { "mData": "nm_cliente" },
        { "mData": "cpf" },
        { "mData": "cidade" },
        { 
           'mRender': function (data, type, full) {
                return '<a href=\'javascript:;\' data-clientid=\'' + full[1] + '\' >Edit</a>';  
            }
        }
    ],
    "ajax": {
        "url": "data/c_fisico.json",
    },
    "dataType": "json"
});

So I'm using mRender to specify what is shown in the table cell. This example will generate an HTML edit link with a `clientid' data-attribute which you can use with jquery. To add more buttons you simply return more code from mRender.

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

3 Comments

I think we are almost there! The main point is: the ID and the CD are different things. ID is a custom number to keep clients organized, while CD is unique id from the DataBase. the CD isn't being displayed on the table. Is there a way to call it? Or i can just call a data that is in the table? The mRender part i understand now. Thank you!
By the way, the data-clientid is with a undefined value. Im using the code you gave me, didn't changed anything. i.imgur.com/b9qzhLb.png
Well i did solve my problem now. Instead of full[0]i just had to use like full.cdor whatever is the string name i have. And the best thing, i don't need the data to be displayed on the table. I can get it direct from the json data. Awesome! Thank you very much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.