Button text inside table.

Button text inside table.

esmurfesmurf Posts: 29Questions: 4Answers: 0
edited August 2019 in DataTables

Hi!
I've got the following table below and I'm using it as a table to import data from several files.

I'm adding data as shown below.

In my table I've got a button on each row. See the column "snippet".

Is it possible to change the text of the buttons on every row when adding data to the table?

     tableVuln = $('#vulnTable2').DataTable();

  tableVuln.rows.add([{
                    "id": n,
                    "outputtool": array[i][0],
                    "testtypeid": array[i][1],
                    "toolid": array[i][2],
                    "scanid": array[i][3],
                    "cvss_temp": array[i][5],
                    "cvss_env": array[i][6],
                    "cvss_base_new": array[i][7],

                    "ip": array[i][9],
                    "mac": array[i][10],
                    "netbiosname": array[i][11],
                    "os": array[i][12],
                    "start": array[i][13],
                    "stop": array[i][14],
                    "protocol": array[i][18],
                    "cve": array[i][19],
                    "service_name": array[i][21],
                    "description": array[i][22],
                    "solution": array[i][23],
                    "kundenr": kdnr,
                    "rapportType": fileRapport,
                    "kundenavn": kundenavn,
                    //  Nedenstående kommer ind i import tabellen.
                    "port/protocol": array[i][17] + "/"+ array[i][18],
                    "port": array[i][17],
                    "plugin_name": array[i][16],
                    "cvss_base_score": array[i][20],
                    "plugin_id": array[i][15],
                    "FP": true,
                    "rapport": true,
                    "medIRapport": true,
                    "snippetRowID":  array[i][15],
                    "snippet": arrayid,

                    "language": languageSnippet,
                    "rowArray": rowArray,
                    "review": review
                }]
            ); 
var editorVulnerability4;


    editorVulnerability4 = new $.fn.dataTable.Editor( {

        idSrc: "id",
    table: "#vulnTable2",
        fields: [

            {
                label: "ip",
                name: "ip",
                defaultContent: null
            },
            {
                label: "port/protocol",
                name: "port/protocol",
                defaultContent: null
            },
            {
                label: "plugin_name",
                name: "plugin_name",
                defaultContent: null
            },
            {
                label: "cvss_base_score",
                name: "cvss_base_score",
            },

            {
                label: "rapport",
                name: "rapport",
                type: "checkbox",
            },
            {
                label: "Sprog",
                name: "language",
                defaultContent: null
            },
            {
                label: "SnipID",
                name: "plugin_id",
                defaultContent: null
            },
            {
                label: "Snippet/UVID",
                name: "snippet",
                defaultContent: null
            },
            {
                label: "Review",
                name: "review",
                defaultContent: null
            },
        ]
    } );
    var table=   $('#vulnTable2').DataTable( {


        rowId: 'id',
        columns: [

            {
                data: "ip",
            },
            {
                data: "port/protocol",

            },
            {
                data: "plugin_name",

            },
            {
                data: "cvss_base_score",
                render: function ( data, type, row ) {
            return data; 
             
                }
            },

            {
                data: "rapport",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {

                            return '<input type="checkbox" id="rapport" class="rapport">';

                    }
    
                },
       
            },
            {
                data: "language",
            },
            {
                data: "plugin_id",
            },
            {
                data: "snippet",
                render: function (data, type, row) {
            if (type === 'display' ) {
                return '<button id="snippetID" >snip</button>'
            }
        return data;
         }
        },
            {
                data: "review",
            }
        ],
        select: {
            style: 'os',
            selector:  'tr>td:nth-child(1), tr>td:nth-child(2), tr>td:nth-child(3), tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth-child(6)'// no row selection on last column
        },
     buttons: [
         { extend: "create", editor: editorVulnerability4 },
         { extend: "edit",   editor: editorVulnerability4 },
         { extend: "remove", editor: editorVulnerability4 },
     ],
        searching: false,
        drawCallback: function(settings) {
            var pagination = $(this).closest('.DataTables_wrapper').find('.DataTables_paginate');
            pagination.toggle(this.api().page.info().pages > 1);

        },


    } );

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,444Questions: 26Answers: 4,974
    edited August 2019 Answer ✓

    I'm assuming you are referring to this part of your code:

                {
                    data: "snippet",
                    render: function (data, type, row) {
                if (type === 'display' ) {
                    return '<button id="snippetID" >snip</button>'
                }
    

    It is possible to set the text to whatever you want. Take a look at the columns.render examples. Those should give you an idea of what you can do. Note that <button id="snippetID" > is invalid as the id needs to be unique on the page. You could set it to an ID within the row.

    Kevin

This discussion has been closed.