Button in DataTables

raspoteen

Hi, I want to create button in DataTables like the image bellow, how can I do that ?

rf1234

https://editor.datatables.net/examples/simple/inTableControls

See the "Edit / Delete" column. Replace those buttons with yours and it should work.

raspoteen

@rf1234 and how to add URL to the button ?

rf1234

Here is an example from my own coding. Two columns that contain links for editor instances and file urls:

1. Part of the datatable "columns" definitions:

....
{data: null,
  render: function (data, type, row) {
      return renderInfoDescriptionCommentsMessages
              (row.contract.description, row.contract.comments_creditor,
                      row.contract.communication);
  }
},
//            mjoin returns row.tableArray[].field]
{data: null,
   render: function (data, type, row) {
       return renderFilesDataTable(row.file);
   }
},
{data: "contract.update_time"}
....

The two functions called to render the URLs:

function renderInfoDescriptionCommentsMessages(description, comments, communication) {
    if ( $(description).text() > '' &&
         $(comments).text() > ''    &&
         $(communication).text() > ''   ) {
        return '<a href="" class="editor_desc"><i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i></a> /\n\
                <a href="" class="editor_comm"><i class="fa fa-commenting-o fa-lg" aria-hidden="true"></i></a> /\n\
                <a href="" class="editor_msg"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a>'
    } else {
        if ( $(description).text() > '' &&
             $(comments).text() > ''        ) {
            return '<a href="" class="editor_desc"><i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i></a> /\n\
                    <a href="" class="editor_comm"><i class="fa fa-commenting-o fa-lg" aria-hidden="true"></i></a>' 
        } else {
            if ( $(description).text() > '' &&
                 $(communication).text() > ''  ) {
                return '<a href="" class="editor_desc"><i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i></a> /\n\
                        <a href="" class="editor_msg"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a>' 
            } else {
                if ( $(comments).text() > '' &&
                     $(communication).text() > ''  ) {
                    return '<a href="" class="editor_comm"><i class="fa fa-commenting-o fa-lg" aria-hidden="true"></i></a> /\n\
                            <a href="" class="editor_msg"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a>' 
                } else {
                   if ( $(comments).text() > '' ) {
                       return '<a href="" class="editor_comm"><i class="fa fa-commenting-o fa-lg" aria-hidden="true"></i></a>' 
                    } else {
                        if ( $(description).text() > '' ) {
                            return '<a href="" class="editor_desc"><i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i></a>' 
                        } else {
                             if ( $(communication).text() > '' ) {
                                return '<a href="" class="editor_msg"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a>' 
                            } else {
                                return '';
                            }
                        }
                    }
                }
            }
        }
    }      
}

function renderFilesDataTable(rowFile) {
    var ix=0;
    var returnString = '';
    var fileName; var fileNameShort;
    var fileExtension;
    var n;
    var iconField;
    while (rowFile[ix]) {
        if (ix !== 0) {
            returnString = returnString.concat('<br>');
        }
        n = rowFile[ix].name.lastIndexOf("."); 
        fileExtension = rowFile[ix].name.substring(n+1);
        iconField = getIconFieldforFiles(fileExtension, '');
        fileName = rowFile[ix].name.substring(0, n);
        if (fileName.length > 11) {
            fileNameShort = fileName.substring(0, 11) + '...';
        }
    //interface files infoma, Sap, Datev are displayed differently!
        if ( rowFile[ix].name === 'interface.txt') {            
            returnString = returnString.concat
                    (iconField + ' ' + "<a href="+rowFile[ix].web_path+
                        " download='Schnittstelle.txt'>Download Schnittstelle</a>");
        } else {
//            returnString = returnString.concat
//                    (iconField + ' ' + fileNameShort.link(rowFile[ix].web_path));
            
            returnString = returnString.concat
                    (iconField + ' ' + "<a href="+rowFile[ix].web_path+
                        " download="+"'"+rowFile[ix].name+"'"+">"+fileNameShort+"</a>");
        }
        ix++; 
    }
    return returnString;
}
function getIconFieldforFiles(fileExtension, size) {
    fileExtension = fileExtension.toLowerCase();
    var iconField = '';
    if ( fileExtension == 'pdf' ) {
        iconField = "<i class='fa fa-file-pdf-o " + size + "' aria-hidden='true'></i>";                   
    } else {
        if ( fileExtension == 'xls'     || 
             fileExtension == 'xlsx'    ||
             fileExtension == 'ods'     ||
             fileExtension == 'csv'      ) {
            iconField = "<i class='fa fa-file-excel-o " + size + "' aria-hidden='true'></i>";
        } else {
            if ( fileExtension == 'doc'     ||
                 fileExtension == 'docx'    ||
                 fileExtension == 'rtf'     ||
                 fileExtension == 'odt'     ) {
                iconField = "<i class='fa fa-file-word-o " + size + "' aria-hidden='true'></i>";
            } else {
                if ( fileExtension == 'ppt'     ||
                     fileExtension == 'pptx'    ||
                     fileExtension == 'odp'    ) {
                    iconField = "<i class='fa fa-file-powerpoint-o " + size + "' aria-hidden='true'></i>";    
                } else {
                    if ( fileExtension == 'txt' ) {
                        iconField = "<i class='fa fa-cloud-download " + size + "' aria-hidden='true'></i>";
                    }
                }
            }
        }
    }    
    return iconField;
}

allan

See also the columns.render documentation which has an example of creating a link.

Allan

raspoteen

I found what I was searching for HERE:

https://datatables.net/reference/option/columns.defaultContent