Include html code in javascript

Question

Include html code in javascript

Navigation

#1 by (4 votes)

1

I am working on an ASP.NET MVC app, in which in the Front cargo a datatable.net by means of a JSON the problem is that in each row I have to add the icon to edit and delete.

The code I occupy is the following:

HTML and JavaScript

<div class="row">
    <div class="col-sm-12">
        <table id="clientes" class="table table-hover display">
            <thead style="background-color: #337ab7; border-color: #2e6da4; color: #fff;">
                <tr>
                    <td>ClienteId</td>
                    <td>Razón Social</td>
                    <td>Número Documento</td>
                    <td>Dirección</td>
                    <td>Fijo</td>
                    <td>Email</td>
                    <td>Estado</td>
                    <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                    <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                </tr>
            </thead>
            <tbody class="celda">

            </tbody>
        </table>
    </div>
</div>


<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#clientes").DataTable({
            "language": {
                "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"
                }
            },
            ajax: {
            "url": "@Url.Action("ListaClientes")",
        "dataSrc": ''
        },
        columns: [
            { "data": "ClienteId" },
            { "data": "RazonSocial" },
            { "data": "NumeroDocumento" },
            { "data": "Direccion" },
            { "data": "Fijo" },
            { "data": "Email" },
            { "data": "Estado" }
        ]
        });
    });

The detail is that in each row the edit and delete button must go, is it possible to put HTML code in the JavaScript that I have to populate the datatable?

javascript html

asked by Pedro Ávila 15.12.2017 в 03:06

source

1 answer

Doubt with page calculation in php pager Run script from several elements with the same name

score 4 · Accepted Answer

It would be necessary to add the property columnDefs . For example:

$(document).ready(function() {
    $('#example').DataTable( {
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return '<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> ('+ row[0]+')';
                },
                "targets": 2
            }
        ]
    } );
} );

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
      <tr>
          <th>Id</th>
          <th>Name</th>
          <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>Tiger Nixon</td>
          <td></td>
      </tr>
      <tr>
          <td>2</td>
          <td>Garrett Winters</td>
          <td></td>
      </tr>
  </tbody>            
</table>

For your case it would be:

"columnDefs": [
    {
        "render": function ( data, type, row ) {
            return '<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> ('+ row[0]+')';
        },
        "targets": 7
    },
    {
        "render": function ( data, type, row ) {
            return '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> ('+ row[0]+')';
        },
        "targets": 8
    }   
]

PD. The numbers that are in parentheses are so you can see how to capture the value of the id, for example.

Reference:

Column rendering