JSON view in a column

SkyDancer

I want to view JSON like some kind of tree structure in one column, that can be collapsed and expanded. I tried to implement by myself by using jQuery plugin - https://github.com/abodelot/jquery.json-viewer But got some issues in process that I can't fix easily. Is there any prepared solutions maybe?

kthorngren

Interesting app. I don't recall seeing an example on the forum. I built a simple one that uses columns.createdCell.
http://live.datatables.net/disosoze/1/edit

It uses columns.defaultContent to place an empty pre element in the cell. columns.createdCell then finds the pre in the cell and provides the data from the json object in the row data. Note this data doesn't need to be showing in the table but just needs to be apart of the row data.

Kevin

SkyDancer

So far I managed to display json in the column but I have issue when I press 'Refresh', or I switch page in pagination I need some kind of events to be sure when I need to rebuild the column, so far I have one issue that I can't fix:
When I'm on first page it works fine, but when I change page to 3 I can't find any event for this action and this is an issue, same issue happens when I refresh data by pressing toolbar button 'Refresh' and if I was on 3rd page in pagination it resets page back to 1st, and according the docs there is an option for that calling 'resetPaging' but seems like it doesn't work if I use handler as first argument, and ofc I need this handler too, so here are my issues.

here is the code I'm talking about and that doesn't work:

table.ajax.reload(function () {
    setJsonView(table);
}, false);

kthorngren

So far I managed to display json in the column but I have issue when I press 'Refresh', or I switch page in pagination I need some kind of events to be sure when I need to rebuild the column, so far I have one issue that I can't fix:

Did you use the columns.cretedCell solution I provided? It woks on multiple pages as can be seen here:
http://live.datatables.net/disosoze/3/edit

Sounds like you might doing something different that just applies the Json Viewer to the DOM elements visible on the page. Datatables removes all the rows from the DOM except the rows on the page being displayed.

When I'm on first page it works fine, but when I change page to 3 I can't find any event for this action

Checkout the Events docs. There is a page event. However, depending on how you implemented the Json Viewer you might see the same problems when searching and sorting. There is a draw event for each time the table is drawn.

according the docs there is an option for that calling 'resetPaging' but seems like it doesn't work if I use handler as first argument

You can see in this test case that the resetPaging parameter does work:
http://live.datatables.net/xosolule/1/edit

You must be calling draw() somewhere that will reset paging unless you pass false for the paging parameter.

If you still need help please post a link to your page or a test case showing the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

SkyDancer

Ok, I finally understood logic of the columns.cretedCell and seems like now it works like I need just finished my codding and seems all works fine, tested all actions like Refresh button, reload page, pagination - no bugs found so far, so I guess time to say Thank You for your help

Here is basic logic to make cell view json:

function createJsonCell (td, cellData, rowData, row, col, jsonProp) {
    var jsonString = rowData[jsonProp]; // Get json string from data object
    // ...Implementation depends of your json viewer
}

...
columns: [
    // Set your column content with some tag, to hide data from viewing
    {
        defaultContent: '<pre id="id_that_will_be_used_to_find_this_element"></pre>'
    }
],
columnDefs: [
    {
        targets: 7,
        searchable: true,
        orderable: false,
        createdCell: function (td, cellData, rowData, row, col) {
            createJsonCell(td, cellData, rowData, row, col, 'property_name_where_json_stores');
        }
    }
]

SkyDancer

I finally understood the logic of columns.cretedCell, so now all works fine after my tests. So I guess it's time to say Thank You for your help

Here is basic logic to make cell view JSON like I described above:

function createJsonCell (td, cellData, rowData, row, col, jsonProp) {
    var jsonString = rowData[jsonProp]; // Get json string from data object
    // ...Implementation depends of your json viewer
}

...
columns: [
    // Set your column content with some tag, to hide data from viewing
    {
        defaultContent: '<pre id="id_that_will_be_used_to_find_this_element"></pre>'
    }
],
columnDefs: [
    {
        targets: 7,
        searchable: true,
        orderable: false,
        createdCell: function (td, cellData, rowData, row, col) {
            createJsonCell(td, cellData, rowData, row, col, 'property_name_where_json_stores');
        }
    }
]

kthorngren

There is a problem with this:

defaultContent: '<pre id="id_that_will_be_used_to_find_this_element"></pre>'

You won't be able to dynamically set the pre id with columns.defaultContent. I suspect you probably don't need to use an id as shown in my example. However if you want to set a unique id for each cell then use columns.render. You can use the meta parameter to get the row index and use that as part of the id if you want. Or base it off another column in the row using the row parameter.

Kevin

SkyDancer

Well, tbh for my needs I don't need to use any attribute I can just select by pre tag to get access to the element and fire method that displays JSON, it worked with id, but you're right it's bad practice better to use <pre class="json-renderer"></pre>. But still even with id it works already, but I changed to the class after code review.