How to show a large formatted text (with new lines) into a cell

How to show a large formatted text (with new lines) into a cell

MauroSMauroS Posts: 5Questions: 3Answers: 0

I'm using Master-Details dataTable with AJAX and Select plug-in with this result:

The right table, named "Dettaglio Violazione", represent the detail of a package violation on the particular target selected on the left side table.
As you can see, the data into the cell is a long text and is showed without formatting.

What should I do for to make the text appear formatted?

The Json query result appear like this:

{
"data":[
{
"deployitem": "huxbep01.intra.infocamere.it",
"error_log": "======= 08/30/22 19:35:26 METDST BEGIN verify AGENT SESSION\n (pid=3298) (jobid=huxbep01-28012)\n\n * Agent session started for user\n \"root@huxbep01.intra.infocamere.it\". (pid=3298)\n\n * Beginning Analysis Phase.\n * Target: huxbep01:/\n * Target logfile: huxbep01:/var/adm/sw/swagent.log\n * Reading source for file information.\nNOTE: The filesystems in the filesystem table will not be checked\n against those currently mounted because the\n \"mount_all_filesystems\" option is set to \"false\".\n * Configured AORI-X.Main,l=/,r=1.16.0\nERROR: File \"/opt/aori/x/script/anag_parm.lst\" should have mtime\n \"1308818857\" but the actual mtime is \"1649844015\".\nERROR: File \"/opt/aori/x/script/anag_parm.lst\" should have size \"9\"\n bytes but the actual size is \"5\" bytes.\nERROR: File \"/opt/aori/x/script/teo_parm.lst\" should have mtime\n \"1308822563\" but the actual mtime is \"1658124609\".\nERROR: File \"/opt/aori/x/script/teo_parm.lst\" should have size \"84\"\n bytes but the actual size is \"23\" bytes.\nERROR: Fileset \"AORI-X.Main,l=/,r=1.16.0\" had file errors.\n\n * Summary of Analysis Phase:\nERROR: Verify failed AORI-X.Main,l=/,r=1.16.0\nERROR: 1 of 1 filesets had Errors.\nERROR: The Analysis Phase had errors. See the above output for\n details.\n\n\n======= 08/30/22 19:35:29 METDST END verify AGENT SESSION (pid=3298)\n (jobid=huxbep01-28012)",
"instvers": "1.16.0",
"violdate": "2022-08-30 19:35:24"
}
]
}

I need that the output looks like this

======= 08/30/22 19:35:26 METDST BEGIN verify AGENT SESSION
(pid=3298) (jobid=huxbep01-28012)

   * Agent session started for user
     "root@huxbep01.intra.infocamere.it". (pid=3298)

   * Beginning Analysis Phase.
   * Target:           huxbep01:/
   * Target logfile:   huxbep01:/var/adm/sw/swagent.log
   * Reading source for file information.

NOTE: The filesystems in the filesystem table will not be checked
against those currently mounted because the
"mount_all_filesystems" option is set to "false".
* Configured AORI-X.Main,l=/,r=1.16.0
ERROR: File "/opt/aori/x/script/anag_parm.lst" should have mtime
"1308818857" but the actual mtime is "1649844015".
ERROR: File "/opt/aori/x/script/anag_parm.lst" should have size "9"
bytes but the actual size is "5" bytes.
ERROR: File "/opt/aori/x/script/teo_parm.lst" should have mtime
"1308822563" but the actual mtime is "1658124609".
ERROR: File "/opt/aori/x/script/teo_parm.lst" should have size "84"
bytes but the actual size is "23" bytes.
ERROR: Fileset "AORI-X.Main,l=/,r=1.16.0" had file errors.

   * Summary of Analysis Phase:

ERROR: Verify failed AORI-X.Main,l=/,r=1.16.0
ERROR: 1 of 1 filesets had Errors.
ERROR: The Analysis Phase had errors. See the above output for
details.

======= 08/30/22 19:35:29 METDST END verify AGENT SESSION (pid=3298)
(jobid=huxbep01-28012)

Thanks in advance.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,167Questions: 26Answers: 4,921

    What should I do for to make the text appear formatted?

    You will need to convert things like "\n" to the equivalent HTML syntax, ie, "<br>" for line break. Use `-option columns.render for this. Similar to this example.

    Kevin

  • MauroSMauroS Posts: 5Questions: 3Answers: 0

    Thank you @kthorngren for your answer. I looked the example but I don't understand where and how to use columns.render.

    My javascript dataTables is:

    $(document).ready(function() {
        var parentTable = $('#report_parent').DataTable( {
        scrollY: '50vh',
        scrollCollapse: true,
        paging: false,
        bFilter: false,
            ajax: "pkg_violato/" + pk_name,
            select: {
              style: 'single'
            },
            columns: [
                { "data": "deployitem" },
                { "data": "instvers" },
                { "data": "violdate" }
            ]
        } );
      
              
        var childTable = $('#report_child').DataTable( {
            scrollY: '50vh',
            scrollCollapse: true,
            paging: false,
            bFilter: false,
            ajax: {
              url: "pkg_violato/" + pk_name,
              data: function ( d ) {
                var selected = parentTable.row( { selected: true } );
                if ( selected.any() ) {
                    d.deployitem = selected.data().deployitem;
                }
              },
              
              dataSrc: function (data) {
                var selected = parentTable.row( { selected: true } );
    
                if ( selected.any() ) {
                    var deployitem = selected.data().deployitem;
                    for (i=0; i < data.data.length; i++) {
                      var row = data.data[i];
                      if (row.deployitem === deployitem) {
                        return [row];
                      }
                    }
                } else {
                return [];
                }
              }
            },
            columns: [
                { "data": "error_log" }
            ]
        } );
    
      parentTable.on( 'select', function () {
        childTable.ajax.reload();
     
    } );
    
    parentTable.on( 'deselect', function () {
        childTable.ajax.reload();
    } );  
      
    } );
    
    

    And my HTML code:

    <table class="table table-bordered" id="report_parent" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th>Target</th>
                                                        <th>Versione</th>
                                                        <th>Data Violazione Rilevata</th>
                                                    </tr>
                                                </thead>
                                                
                                                <tfoot>
                                                    <tr>
                                                        <th>Target</th>
                                                        <th>Versione</th>
                                                        <th>Data Violazione Rilevata</th>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-6 mb-4">
                                <div class="card shadow mb-4">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <h3 class="h3 mb-2 font-weight-bold text-primary text-gray-800">Dettaglio Violazione</h3>
                                            {% comment %} <link href="/static/home/vendor/datatables/jquery.dataTables.min.css" rel="stylesheet"> {% endcomment %}
                                            <table class="table" id="report_child" width="100%">
                                                {% comment %} <thead>
                                                    <tr>
                                                        <th>Violazione</th>
                                                    </tr>
                                                </thead>
    
                                                <tfoot>
                                                    <tr>
                                                        <th>Violazione</th>
                                                    </tr>
                                                </tfoot> {% endcomment %}
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    Answer ✓
    {
      data: "error_log",
      render: function (d) {
        return d.replace(/\n/g, '<br>');
      }
    }
    

    Should do it. The columns.render lets you modify the data before display or other DataTables processing. See this part of the documentation for more details.

    Allan

  • MauroSMauroS Posts: 5Questions: 3Answers: 0

    Thank you very much @allan. Woks fine!

  • MarekAdamMarekAdam Posts: 30Questions: 9Answers: 1

    Hi! I have problem with this function, its woks fine in table but i have also child rows like in this example
    https://datatables.net/examples/api/row_details.html
    With Allan founction data in table is with br but data in child row is with /n. How to make br in child rows?
    Moving the allan function to a text display function throws an error.

            function format(d) {
    
                // `d` is the original data object for the row
                return (
                    '<dl>' +
                    '<dt>text:</dt>' +
                    '<dd>' +
                    d.table.text+
                    '</dd>' +
    
                    '</dl>'
                );
            }
    
  • kthorngrenkthorngren Posts: 21,167Questions: 26Answers: 4,921
    edited September 2023

    @MarekAdam

    Moving the allan function to a text display function throws an error.

    What did you try?

    And what is the error?

    Something like this should work:

    function format(d) {
     
        // `d` is the original data object for the row
        return (
            '<dl>' +
            '<dt>text:</dt>' +
            '<dd>' +
            d.table.text.replace(/\n/g, '<br>') +
            '</dd>' +
     
            '</dl>'
        );
    }
    

    If you still need help then please provide a test case that shows the problem you are having.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • MarekAdamMarekAdam Posts: 30Questions: 9Answers: 1

    Works! You're the best. I'm bad at JS and I pressed the render function into the second line.

Sign In or Register to comment.