CODEWITHSUNDEEP
jquerydatatables
Bill in Kansas City
Bill in Kansas City

Reputation: 360

Datatables: Setting row HTML5 data-* attribute from existing JSON object

I haven't been able to find any answers - either on Stackoverflow or Google - that answers my specific question. Maybe I'm just not using the correct search terms. It also seems like most of the examples on the Datatables website deal with columns that are defined in the html and/or don't provide for a lot of complexity.

I have a json dataset that includes an id column that I'd like to use to open an edit screen for the selected item, but I don't want the id visible to the end user.

Script:

var tableData = [{
    "iditem": 1,
    "itemcaption": "Edit Your Website...",
    "itemurl": "\/\/#devurl#",
    "itemclass": "website",
    "adminonly": 0,
    "deprecated": 0
}, {
    "iditem": 2,
    "itemcaption": "Navigator",
    "itemurl": "\/admin\/?#b#",
    "itemclass": "navigator",
    "adminonly": 1,
    "deprecated": 0
}, {
    "iditem": 3,
    "itemcaption": "Ad Baskets",
    "itemurl": "\/login?cmd=dologin",
    "itemclass": "vehicleSearches",
    "adminonly": 0,
    "deprecated": 0
}, {
    "iditem": 4,
    "itemcaption": "Calendar",
    "itemurl": "\/admin\/calendar/?#b#",
    "itemclass": "calendar",
    "adminonly": 0,
    "deprecated": 0
}, {
    "iditem": 5,
    "itemcaption": "Company\/Employees",
    "itemurl": "\/admin\/company/?#b#",
    "itemclass": "company",
    "adminonly": 0,
    "deprecated": 0
}];

tblListing = $("#tblMenuList").DataTable({
    data: tableData,
    columns: [
        {title: 'Item Caption', data: "itemcaption"},
        {title: 'URL', data: "itemurl"},
        {title: 'Class', data: "itemclass"},
        {title: 'Deprecated', data: "deprecated"},
        {title: 'Admin', data: "adminonly"}
    ],
    columnDefs: [
        {
            "targets": 0,
            "render": function ( data, type, row, meta ) {
                return '<a href="editmyitem.php?id={SOMEHOW GET IDITEM IN HERE}">' + data + '</a>';
                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^
            }
        }
    ]
});

HTML: 

<table id="tblMenuList"></table>

I'd like to include the id as an HTML5 data-* attribute of the row. If that's not possible, do I just include the id column, hidden, and traverse the DOM for the value?

Upvotes: 0

Views: 290

Answers (2)

Sreeraj_ms
Sreeraj_ms

Reputation: 551

Just append IDITEM from row.iditem

script

columnDefs: [
        {
            "targets": 0,
            "render": function ( data, type, row, meta ) {
                return '<a href="editmyitem.php?id='+row.iditem+'">' + data + '</a>';

            }
        }
    ]

Upvotes: 1

Richard Lovell
Richard Lovell

Reputation: 888

Are you able to modify the model? Maybe you can add another identifier that you don't mind being publicly visible, like a slug. For example, if the title is "My title" the slug would be "my-title". Looking at your JSON data, you might be able to do this with the caption property if you don't have a title and the captions are unique. There are handy Javascript libraries such as slug that can help create slugs and are especially helpful for stripping out special characters, etc.

Upvotes: 0

Related Questions