What is the most conventional/best place to add actions for items inside datatable?

Like actions I would say “delete”, “edit”, “details” and many more maybe. How display that on a desktop application. Some possibilites that I already used could be :

  • Add to the top before the header and display when one item is selected
  • Inside the row at the beginning or at the end
  • With a three dot icon after the first cell like with can see in Sharepoint
  • In the top of the row when you are over with the mouse
  • Other ?

My feedback is as follow…

  • For the first one, it’s good to set batch action (things you do to a group of things) or to the table as the whole. But sometimes you see actions for the selected item too. Could be good when you have a lot’s like 5 to 10 actions. And it’s a good idea because you have space and on your datatable you have just DATA and nothing else more. But for a user it’s not always easy to understand the link between actions on the top ouside datatable and the selected item.

  • For the second one, I like it because you directly understand that these actions are for the item. But if you put at the end and your table have several columns or if your sceen is small you must always scroll and you didn’t see them directly. If you put at the beginning it could takes a lot’s of space and the most important thing (data) are pushed to the bottom and maybe ouside the visible part of the page

  • With the third you can group it and gain some space. Your button will be always visible and it will not takes too much space. But the user didn’t see actions directly and for all actions he want to do he must do one more click to open menu then find on the menu what he want then click again. It will takes more time to activate an action than the other solutions.

  • Last one… I m not a big fan it cover data and you think that there is like a glitch on screen.

To resume for me there is no good solution or standards with material design and it is kind of shame…

If you have any article/feedback who speak arround this problem… Please send me !

How to order by modified (desc) and remove duplicate results in SPO List Datatable

Below is a working datatable for my SPO list called Companies. I am having 2 issues that I can’t seem to get right. I’ve implemented what I could learn from the DT website and board, but no luck. Below is a simple datatable with one calculated column (text) called calcCompanyRecent. Full script is below. Thanks in advance!

Request #1

I want the DT Order list items by most recently Modified (descending order). The Modified column is NOT included in this datatable. The list keeps defaulting to col1 (asc) for the sort order


Request #2

There are some duplicates in this list, but I want all of the duplicates removed. I have attempted the solutions on the DT site, but nothing seems to work.


<!—Data tables CSS -->           <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>            <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"/>            <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"/>           <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"/>   <!—Data tables JS -->             <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>             <script src="../../SiteAssets/solutions/datatable-editor/dataTables.altEditor.free.js"></script>             <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>             <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>             <script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>          <script type="text/javascript">          // Datatable Script          $  (document).ready(function() {               loadMyItems();           });            function loadMyItems() {               var siteUrl = _spPageContextInfo.siteAbsoluteUrl;               var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('Companies')/items?$  select=calcCompanyRecent&$  orderby=Modified desc&$  top=20";               $  .ajax({                    url: oDataUrl,                   type: "GET",                   dataType: "json",                   headers: {                       "accept": "application/json;odata=verbose"                   },                   success: mySuccHandler,                   error: myErrHandler               });           }            function mySuccHandler(data) {               try {                   var dataTableExample = $  ('#table_id').DataTable();                   if (dataTableExample != 'undefined') {                       dataTableExample.destroy();                   }                   dataTableExample = $  ('#table_id').DataTable({                       scrollY: 200,                     responsive: true,                       "aaData": data.d.results,                           "iDisplayLength": 5,                     "aoColumns": [                     {                              "mData": "calcCompanyRecent"                       }]                   });               }          catch (e) {                   alert(e.message);               }           }            function myErrHandler(data, errCode, errMessage) {               alert("Error: " + errMessage);           }            // Invoke CompanyList NewForm Modal          function openCoListModal() {             SP.UI.ModalDialog.showModalDialog({                 width: 800,                 height: 500,                         url: "/Lists/companylist/AddNew.aspx"             });         }         </script>          <script type="text/javascript">                // Using the DialogOptions class               function OpenDialog(strPageURL) {                   var dialogOptions = SP.UI.$  create_DialogOptions();                   dialogOptions.url = strPageURL; // URL of the Page                   // Width of the Dialog                   dialogOptions.width = 800;                   // Height of the Dialog                   dialogOptions.height = 530;                   // Function to capture dialog closed event                   //dialogReturnValueCallback - A function pointer that specifies the return callback function. The function takes two parameters, a dialogResult of type SP.UI.DialogResult Enumeration and a returnValue of type object that contains any data returned by the dialog.                   dialogOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);                   // Open the Dialog                   SP.UI.ModalDialog.showModalDialog(dialogOptions);                   return false;               }                // Dialog close event capture function               function CloseCallback(strReturnValue, target) {                   location.reload(true);               }           var columnDefs = [{             title: "Title"           }, {             title: "calcCompanyRecent"           }];              var myTable;           myTable = $  ('#table_id').DataTable({             sPaginationType: 'none',             data: 'data.d.results',                                          dom: 'Bfrtip',        // Needs button container                   select: 'single',                   responsive: 'true',                    altEditor: 'true',     // Enable altEditor                   buttons: [{                     text: 'Add',                     name: 'add'        // do not change name                   },                   {                     extend: 'selected', // Bind to Selected row                     text: 'Edit',                     name: 'edit'        // do not change name                   },                   {                     extend: 'selected', // Bind to Selected row                     text: 'Delete',                     name: 'delete'      // do not change name                  }]           });           });         </script> 

DataTable – No se muestra contenido en ciertas columnas

Tengo el siguiente inconveniente. Localmente mi dataTable carga los datos de manera correcta: (Esto en cualquier navegador)

introducir la descripción de la imagen aquí

Sin embargo, cuando publico mi aplicación en uno de los servidores se observa de la siguiente manera:

introducir la descripción de la imagen aquí

He revisado la consulta y si obtiene los datos. Verifico el JSON en el navegador y a mi parecer la información si carga en el navegador:

introducir la descripción de la imagen aquí

¿Alguien ha tenido una situación parecida? ¿Que podría revisar? Saludos

Ocultar boton especifico en DataTable

Estoy tratando de encontrar la manera en como puedo Cambiar el texto de un botón de una fila diferente.

Traigo toda la información al DataTable con JQuery y JavaScript.

Lo que quiero realizar es que al momento de dar clic en el botón de aceptar, cambie el texto del otro boton y si doy en cancelar ocurra lo mismo. lo trate de realizar con $ (this).closest('div#proceso').find('.estadoProceso').remove() pero no tuve ningún resultado.

Anteriormente lo realizaba con la clase del botón pero por obvias razones, al momento de dar clic, me desaparecía los demás botones y no unicamente el de la fila.

Esta es la forma en como imprimo el DataTable con JQuery

public function mostrarTabla(){       if (isset($  _GET["perfilOculto"])) {          $  item = "idUsuario";         $  valor = $  _GET["perfilOculto"];          $  proyectos = ControladorProyectos::ctrMostrarProyectos($  item, $  valor);          if(count($  proyectos) == 0){              echo '{"data": []}';              return;         }          $  datosJson = '{              "data": [ ';              for($  i = 0; $  i < count($  proyectos); $  i++){                  $  item = "id";                 $  valor = $  proyectos[$  i]["empleadoAsignado"];                  $  traerEmpleado = ControladorUsuarios::ctrMostrarEmpleados($  item, $  valor);                  $  empleado = $  traerEmpleado[0]["nombreEmpleado"] ." ". $  traerEmpleado[0]["apellidoEmpleado"];                  $  dato = $  proyectos[$  i]["idCliente"];                  $  clientes = ControladorProyectos::ctrMostrarClientes($  dato);                  $  cliente = $  clientes[0]["nombreEmpresa"];                  $  clienteContacto = $  clientes[0]["emailContacto"];                  if($  proyectos[$  i]["aceptado"] == 0){                      $  colorEstado = "btn-info";                     $  textoEstado = "Aceptado";                     $  estadoAceptado = 1;                      $  colorEstado2 = "btn-danger";                     $  textoEstado2 = "Cancelado";                     $  estadoAceptado2 = 2;                      $  colorEstado3 = "btn-info";                     $  textoEstado3 = "Pendiente de aceptar";                     $  estadoTarea = 1;                      $  estado = "<button class='btn btn-xs aceptado btnAcptado ".$  colorEstado."'' idProyecto='".$  proyectos[$  i]["id"]."' estadoAceptado='".$  estadoAceptado."'>".$  textoEstado."</button>&nbsp";                      $  estado2 = "<button class='btn btn-xs rechazado btnRechazado ".$  colorEstado2."' idProyecto='". $  proyectos[$  i]["id"]."' estadoAceptado2='".$  estadoAceptado2."'>".$  textoEstado2."</button>";                      $  estado3 = "<button class='btn btn-xs estadoProceso btnEstado ".$  colorEstado3."' idProyecto='". $  proyectos[$  i]["id"]."' estadoTarea='".$  estadoTarea."'>".$  textoEstado3."</button>";                      $  botones =  "<div class='btn-group '><button class='btn btn-warning btnEditarProyecto' idProyecto='".$  proyectos[$  i]["id"]."' data-toggle='modal' data-target='#modalEditarProyecto'><i class='fa fa-pencil'></i></button><button class='btn btn-danger btnEliminarProyecto' idProyecto='".$  proyectos[$  i]["id"]."'><i class='fa fa-times'></i></button></div>";                    } else if($  proyectos[$  i]["aceptado"] == 1){                      $  colorEstado = "btn-info";                     $  textoEstado = "Aceptado";                     $  estadoAceptado = 1;                      $  colorEstado2 = "invisible";                     $  textoEstado2 = "Cancelado";                     $  estadoAceptado2 = 2;                      $  colorEstado3 = "btn-info";                     $  textoEstado3 = "En proceso";                     $  estadoProyecto2 = 1;                      $  estado2 = "<button class='".$  colorEstado2."'></button>";                      $  estado = "<button class='btn btn-xs aceptado btnAcptado ".$  colorEstado."' idProyecto='". $  proyectos[$  i]["id"]."' estadoAceptado='".$  estadoAceptado."'>".$  textoEstado."</button>&nbsp";                      $  estado3 = "<button class='btn btn-xs estadoProceso btnEstado ".$  colorEstado3."' idProyecto='". $  proyectos[$  i]["id"]."' estadoProyecto2='".$  estadoProyecto2."'>".$  textoEstado3."</button>";                      $  botones =  "<div class='btn-group '><button class='btn btn-danger btnEliminarProyecto' idProyecto='".$  proyectos[$  i]["id"]."'><i class='fa fa-times'></i></button></div>";                   } else {                     $  colorEstado = "invisible";                     $  textoEstado = "Aceptado";                     $  estadoAceptado = 1;                      $  colorEstado2 = "btn-danger";                     $  textoEstado2 = "Cancelado";                     $  estadoAceptado2 = 2;                      $  colorEstado3 = "btn-danger";                     $  textoEstado3 = "Proyecto cancelado";                     $  estadoProyecto2 = 3;                      $  estado = "<button class='".$  colorEstado."'></button>";                      $  estado2 = "<button class='btn btn-xsr rechazado btnCancelar ".$  colorEstado2."' idProyecto='".$  proyectos[$  i]["id"]."' estadoAceptado2='".$  estadoAceptado2."'>".$  textoEstado2."</button> &nbsp";                      $  estado3 = "<button class='btn btn-xs estadoProceso btnEstado ".$  colorEstado3."' idProyecto='". $  proyectos[$  i]["id"]."' estadoProyecto2='".$  estadoProyecto2."'>".$  textoEstado3."</button>";                       $  botones =  "<div class='btn-group '><button class='btn btn-danger btnEliminarProyecto' idProyecto='".$  proyectos[$  i]["id"]."'><i class='fa fa-times'></i></button></div>";                  }                  $  div = "<div class='btn-group botonera'>";                  $  finDiv = "</div>";                  $  div2 = "<div class='btn-group' id='proceso'>";                  $  finDiv2 = "</div>";                    $  datosJson .= '[                     "'.$  cliente.'",                     "'.$  proyectos[$  i]["nombreProyecto"].'",                     "'.$  clienteContacto.'",                     "'.$  div.$  estado.$  estado2.$  finDiv.'",                     "'.$  div2.$  estado3.$  finDiv2.'",                     "'.$  empleado.'",                     "'.$  botones.'"                 ],';             }              $  datosJson = substr($  datosJson, 0, -1);              $  datosJson.=  ']          }';           echo $  datosJson;     } } 

El siguiente código es el de JS donde quiero desaparecer el botón al momento de dar clic sobre el otro

    $  (document).on("click", ".btnRechazado", function(){    var idProyecto = $  (this).attr("idProyecto");   var estadoAceptado = $  (this).attr("estadoAceptado2");   var estadoProyecto2 = 2;    console.log(idProyecto);    console.log(estadoAceptado);    var datos = new FormData();     datos.append("idProyecto", idProyecto);     datos.append("estadoAceptado", estadoAceptado);     datos.append("estadoProyecto2", estadoProyecto2);      $  .ajax({      url:"ajax/proyectos.ajax.php",     method: "POST",     data: datos,     cache: false,       contentType: false,       processData: false,       success: function(respuesta){         console.log(respuesta);          if(window.matchMedia("(max-width:767px)").matches){             swal({             title: "El usuario ha sido actualizado",             type: "success",             confirmButtonText: "¡Cerrar!"           }).then(function(result) {                if (result.value) {                window.location = "proyectos";              }            });       }       }      })      if(estadoAceptado == 2){        $  (this).addClass('btn-danger');       $  (this).removeClass('btn-info');       $  (this).html('Cancelado');        $  (this).closest('div#proceso').find('.estadoProceso').remove();        $  (this).closest('div.botonera').find('.aceptado').remove();      }  }) 

introducir la descripción de la imagen aquí

Quiero que al momento en que doy clic en aceptado se muestre el texto como se muestra en la primer fila, y si doy en cancelado, como se muestra en la segunda fila, pero hasta el momento no lo he logrado, como se puede observar en la fila 3

Recargar datatable al borrar registro

tengo el siguiente inconveniente tengo dos scripts un trae el listado de datos de una consulta la función se llama listar() y en otro script se llama funcion eliminar (), todo bien pero cuando borro el registro tengo que actualizar la pagina para que se vea el resultado, necesito que saque el registro de la tabla sin recargar la pagina. Muchas gracias Adjunto el primer script de listar el cual llama desde la ultima columna a la funcion eliminar.

<script type="text/javascript">   function listar(){     var idarea = document.getElementById('idarea').value;     var fechah = document.getElementById('Fechahasta').value;     var fechad = document.getElementById('Fechadesde').value;     if (fechad > fechah || fechah == fechad || fechah == '' || fechad == '' ){       alertify.alert("Atención","Rango de fechas incorrectos");       return false;     }     else{        $  ("#titulo").show();       $  ("#movimiento").show();       var combo = document.getElementById('area').value;        document.getElementById("ctexto").innerHTML='Listado de entradas de productos'+'-'+combo;         var table = $  ("#movimiento").DataTable({          "destroy": true,          "order": [0, 'desc'],         "ajax": {           "method": "POST",           "url": "data/getent.php",            "data": function (d) {             return $  .extend({}, d, {               "idarea": $  ('#idarea').val(),               "fechah": $  ('#Fechahasta').val(),               "fechad": $  ('#Fechadesde').val()             });           }         },         "columns": [{           "data": "id"         }, {           "data": "name"         }, {           "data": "cant"         }, {           "data": "fecha"         }, {           "data": "receptor"         }, {           "data": "usuario"         }, {           "data": "remito"         }, {           "data": "expediente"},            {"targets": -1,           "data": null,           "render": function(data, type, full, meta){             if(type === 'display'){               data = '<div class="text-center" class="btn-group" ><a  href="#"  onclick="eliminar('+ full['id'] +') " ><i class="fas fa-trash-alt  fa-2x" title="Consultar" style="text-align: center; "></i></a></div>';             }              return data;            }}           ],       dom: 'Bfrtip',       buttons: [       { extend: 'print',         footer: true,  exportOptions: { columns: [0, 1, 2, 3, 4, 5,6,7 ],format: {         body: function ( data, row, column, node ) {             return column === 1,2,3 ?                 data.toUpperCase():                 data;         }     } } },       { extend: 'excelHtml5', footer: true,  exportOptions: { columns: [0, 1, 2, 3, 4, 5,6,7 ],format: {         body: function ( data, row, column, node ) {             return column === 1,2,3 ?                 data.toUpperCase():                 data;         }     } } },       { extend: 'pdfHtml5', footer: true, exportOptions: { columns: [0, 1, 2, 3, 4, 5,6,7 ],format: {         body: function ( data, row, column, node ) {             return column === 1,2,3 ?                 data.toUpperCase():                 data;         }     } } }       ],         "language": idioma_es      });    } } var idioma_es = {     "sProcessing":     "Procesando...",     "sLengthMenu":     "Mostrar _MENU_ registros",     "sZeroRecords":    "No se encontraron resultados",     "sEmptyTable":     "Ningún dato disponible en esta tabla",     "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",     "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",     "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",     "sInfoPostFix":    "",     "sSearch":         "Buscar:",     "sUrl":            "",     "sInfoThousands":  ",",     "sLoadingRecords": "Cargando...",     "oPaginate": {       "sFirst":    "Primero",       "sLast":     "Último",       "sNext":     "Siguiente",       "sPrevious": "Anterior"     },     "oAria": {       "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",       "sSortDescending": ": Activar para ordenar la columna de manera descendente"     }   }  </script>  // Función eliminar llamada desde la función listar  <script type="text/javascript">   function eliminar(id){  var table = $  ('#movimiento').DataTable();      var id = id;      var conf = confirm("¿Está seguro, realmente desea eliminar el registro?");     if (conf == true) {        var Fechadesde= document.getElementById('Fechadesde').value;       var Fechahasta= document.getElementById('Fechahasta').value;       var idarea= document.getElementById('idarea').value;        $  .ajax({        type:"POST",       url:"deletent.php",       data:"id="+id+"&Fechadesde="+Fechadesde+"&Fechahasta="+Fechahasta+"&idarea="+idarea,       success: function (data){           table.row('.selected').remove().draw( false );          }      });   }     }    </script> 

//No se como puedo actualizar sin recargar la pagina cada vez que borro registro

Cómo pasar datos de un datagridview a un datatable (incluyendo una imagen) en vb.net?

Así la cuestión. Tengo una datagridview donde tengo cargados todos los productos y otro datagridview donde incluyo los productos a los cuales les quiero imprimir codigo de barra. En ese datagrid tengo cod, desc, lab, pres, medida, barcode (esta ultima es de tipo imagecolumn) como columnas. Lo que quiero es pasar todos los datos del segundo datagrid a un datatable para usarlo en un reporte de crystal reports.

Gracias de antemano

Crear botones fuera del datatable

Hola amigos estoy trabajando en cambio de version de symfony 2 a 3.4 y al trabajar con datatables ahora no me muestra los botones fuera del datatable este es el codigo. En la version anterior:

public function buildDatatable(array $  options = array()) {     $  this->topActions->set(         array(             'start_html' => '<div class="row"><div class="col-sm-3">',             'end_html' => '<hr></div></div>',             'actions' => array(                 array(                     'route' => $  this->router->generate('admin_artista_new'),                     'label' => $  this->translator->trans('datatables.actions.new'),                     'icon' => 'glyphicon glyphicon-plus',                     'attributes' => array(                         'rel' => 'tooltip',                         'title' => $  this->translator->trans('datatables.actions.new'),                         'class' => 'btn btn-primary',                         'role' => 'button',                     ),                 ),                 array(                     'route' => $  this->router->generate('admin_artistas_excel'),                     'label' => 'Generar XLS todos los artistas',                     'icon' => 'glyphicon glyphicon-plus',                     'attributes' => array(                         'rel' => 'tooltip',                         'title' => $  this->translator->trans('datatables.actions.new'),                         'class' => 'btn btn-primary',                         'role' => 'button',                         'target' => '_blank'                     ),                 ),             ),         )     ); 

no se porque no funciona el $ this->actions en la nueva version

Datatable Pintar fila

He realizado un sistema de mensajes entre los usuarios muy básico, y saco en un datatable el informe de todos los mensajes enviados… el caso es que quiero que en el datatable cuando el mensaje no este leído salga en un color rojo por ejemplo y cuando este leído lo ponga en verde. He probado así:

<html> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet"> <style>     tr.group,     tr.group:hover {         background-color: #ddd !important;     },     th { white-space: nowrap; },     td.details-control {         background: url('../iconos/abrirdetalles.png') no-repeat center center;         cursor: pointer;     }     tr.details td.details-control {         background: url('../iconos/cerrardetalles.png') no-repeat center center;     }     tr.group,     tr.group:hover {         background-color: #ddd !important;     },     th { white-space: nowrap; }     table.dataTable thead th{         font-size: 14px;         padding: 4px;     }     table.dataTable.display tbody td {         padding: 2px;         font-size: 12px;         text-align: center;     }     table.dataTable.display tbody tr.group td{         text-align: left;         font-size: 14px;         font-weight: bold;         padding: 4px;     }     .highlight {         background-color: black;         color: white;     } </style> </html> <?php  require_once('../Conection.php');  $  conection = Conection::getConection(); mysqli_query($  conection,"SET NAMES 'utf8'"); $  mensajes=[]; $  query="SELECT m.id as CodMensaje,m.Fecha as Fecha,m.autor as Autor,m.destinatario as Destinatario,m.mensaje as Mensaje,t.Nombre as tNombre,m.estado as Estado  FROM mensajes m INNER JOIN trabajadores t ON Codigotrab=autor"; $  result = mysqli_query($  conection, $  query); while($  row = mysqli_fetch_assoc($  result)) {     $  mensajes[]=array(         "CodMensaje"=>$  row['CodMensaje'],         "Fecha"=>$  row['Fecha'],         "Autor"=>$  row['Autor'],         "Destinatario"=>$  row['Destinatario'],         "Mensaje"=>$  row['Mensaje'],         "tNombre"=>$  row['tNombre'],         "Estado"=>$  row['Estado']     ); } json_encode($  mensajes); echo "<h1>REGISTRO DE MENSAJES ENVIADOS</h1>"; echo "<table id='mensajes' class='display' style='width: 100%'>         <thead>             <tr>                 <th>AUTOR</th>                 <th>DESTINATARIO</th>                 <th>FECHA</th>                 <th>MENSAJE</th>                 <th>OPCIONES</th>             </tr>         </thead><tbody>"; if(!empty($  mensajes)) {     foreach ($  mensajes as $  i) {  //Iteramos tu objeto         $  tds = ""; //Inicmaos variable tds         $  tds .= "<td>" .$  i['tNombre']." - ".$  i['Autor']. "</td>"; // Extraemos solo el valor concatenandolo en la variable $  tds.         $  destinatario=$  i['Destinatario'];         $  query="SELECT Nombre FROM trabajadores WHERE Codigotrab='$  destinatario'";         $  result = mysqli_query($  conection, $  query);         $  destinatarionombre=mysqli_fetch_row($  result)[0];         $  tds .= "<td>" . $  i['Destinatario'] ." - ".$  destinatarionombre. "</td>"; // Extraemos solo el valor concatenandolo en la variable $  tds.         $  tds .= "<td>" . date('d-m-Y H:i',strtotime($  i['Fecha'])) . "</td>"; // Extraemos solo el valor concatenandolo en la variable $  tds.         $  tds .= "<td>" . $  i['Mensaje'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $  tds.         $  codigo=$  i['CodMensaje'];         $  tds .= "<td>" ."<span valor=$  codigo><img class='borrable' src='../img/borrar.png'>". "</span></td>"; // Extraemos solo el valor concatenandolo en la variable $  tds.         if ($  i['Estado']==0){             echo "<tr bgcolor='#f08080'>" . $  tds . "</tr>"; // Imprimimos el resultado final         }         else{             echo "<tr bgcolor='#90ee90'>" . $  tds . "</tr>"; // Imprimimos el resultado final         }      } } ?> </tbody>  </table> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>  <script src="../js/tablemensajes.js"></script> 

Y el js del datatables:

$  (document).ready(function() {     var groupColumn = 0;     var table = $  ('#mensajes').DataTable({         "processing": true,         "columnDefs": [             { "visible": false, "targets": groupColumn }         ],         "order": [[ groupColumn, 'asc' ]],         "displayLength": 25,         "drawCallback": function ( settings ) {             var api = this.api();             var rows = api.rows( {page:'current'} ).nodes();             var last=null;              api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {                 if ( last !== group ) {                     $  (rows).eq( i ).before(                         '<tr class="group"><td colspan="5">'+group+'</td></tr>'                     );                     last = group;                 }             } );         },         dom: 'Bfrtip',         buttons: [             {extend:'print',text: "Imprimir",title: "Registro de Llamadas",footer:true },             {extend:'excel',text: "Exportar Excel",title: "Registro de Llamadas",footer:true },             {extend:'pdf',text: "Exportar PDF",title: "Registro de Llamadas",footer:true},             {extend:'copy',text: "Copiar portapapeles",title: "Registro de Llamadas",footer:true}         ],         "language": {             "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"         },         "footerCallback": function ( row, data, start, end, display ) {             var api = this.api(), data;              // Remove the formatting to get integer data for summation             var intVal = function ( i ) {                 return typeof i === 'string' ?                     i.replace(/[$  ,]/g, '')*1 :                     typeof i === 'number' ?                         i : 0;             };         }     } );     // Order by the grouping     $  ('#mensajes tbody').on( 'click', 'tr.group', function () {         var currentOrder = table.order()[0];         if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {             table.order( [ groupColumn, 'desc' ] ).draw();         }         else {             table.order( [ groupColumn, 'asc' ] ).draw();         }     } );     $  ('.borrable').on('click',function () {         if(confirm("Desea borrar este mensaje?")) {             id = $  (this).parent().attr("valor");             $  .ajax({                 type: "POST",                 url: "../ajax/borrados/mensajes.php",                 data: {id: id},             });             $  (this).parent().parent().parent().remove()         }     }); } ); 

El caso es que yo le doy este formato pero cuando llega y ejecuta el .datatable pues le aplica sus propios formatos, alguien que entienda mas me puede ayudar? gracias

No matching records found datatable

Mi Datatable no pinta las filas; el JSON devuelve todas los datos incluso se muestra cuantos datos a obtenido pero no aprace mas.

    $  (document).ready(function() {       $  ('#dtclientes').dataTable( {           processing: false,           serverSide: true,           ajax: {               url: "lsclients",               type: "GET",               dataSrc: ""           },           columns: [             {data:"name" },             {data:"type" },             {data:"document" },             {data:"phone" },             {data:"status" },             {data:"id" }           ]         });   });

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Problema con datatable ajax laravel

tengop un detalle con la datatable de laravel con la libreria yajra, trato de imprimir una variable y me da error aqui mi codigo

$  gastos = Gastos::where('empresa',Auth::user()->empresa)->where('tipo', "<>", 5)->get();    return DataTables::of($  gastos)       ->editColumn('beneficiario', function ($  gastos){           $  contacto = DB::table('contactos')->where('id',$  gastos->beneficiario)->get();           return '<a href="" target="_blanck">'.$  contacto[0]->nombre.'</a>';       })       ->rawColumns(['beneficiario'])       ->toJson(); 

al tratar de imprimir contacto->nombre me lanza error