0

Estoy realizando una edicion de campos a traves de la libreria DataTable de JQuery, el problema es que tengo que alimentar la tabla a traves de datos que obtengo de una BD, y no he podido alimentar esa tabla a traves de la libreria, lo que quiero es hacer algo asi(ejemplos tomados de la pagina de DataTables)

introducir la descripción de la imagen aquí

y editar el registro introducir la descripción de la imagen aquí

tengo mi tabla html ya configurada con la libreria de esta forma y creo que funciona perfectamente

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<script src="~/Scripts/dataTables_editor.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    var editor; // use a global for the submit and return data rendering in the examples
    editor = new $.fn.dataTable.Editor({
        dom: "Tfrtip",
        "ajax": "adendum1",
        "table": "#example",
        "fields": [{
            "label": "First name:",
            "name": "first_name"
        }, {
            "label": "Last name:",
            "name": "last_name"
        }, {
            "label": "Position:",
            "name": "position"
        }, {
            "label": "Office:",
            "name": "office"
        }, {
            "label": "Extension:",
            "name": "extn"
        }, {
            "label": "Start date:",
            "name": "start_date",
            "type": "datetime"
        }, {
            "label": "Salary:",
            "name": "salary"
        }
        ]
    });

    // New record
    $('a.editor_create').on('click', function (e) {
        e.preventDefault();

        editor.create({
            title: 'Create new record',
            buttons: 'Add'
        });
    });

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();

        editor.edit($(this).closest('tr'), {
            title: 'Edit record',
            buttons: 'Update'
        });
    });

    // Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();

        editor.remove($(this).closest('tr'), {
            title: 'Delete record',
            message: 'Are you sure you wish to remove this record?',
            buttons: 'Delete'
        });
    });

    $('#example').DataTable({
        dom: "Tfrtip",
        ajax: "adendum1",
        //data: function (data) { return data = JSON.stringify(data); },
        columns: [

            
            {
                data: null, render: function (data, type, row) {
                    // Combine the first and last names into a single table field
                    return data.first_name + ' ' + data.last_name;
                }
            },
            { data: "position" },
            { data: "office" },
            { data: "extn"},
            { data: "start_date"},
            { data: "salary"},
            {
                data: null,
                className: "center",
                defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
            }
        ]
    });
});
</script>

<div>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Edit / Delete</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Edit / Delete</th>
        </tr>
    </tfoot>
</table>
</div>

La pagina donde debe obtener los datos para llenar el DataTable es adendum1 y este mi codigo, creo que ahi es donde tengo el problema, para llenar, no se como recuperar los registros que devuelve la pagina, este es mi codigo

@Code 
Dim db = Database.Open("Factura1") 
Dim muestraAdendum = db.Query("SELECT*FROM EMPRESARIALES.ADENDA WHERE CUENTA_PADRE IS NULL") 
End Code

{
  "data": [

@Code For Each item In muestraAdendum End Code
{
  "DT_RowId": "row_1",
  "first_name": "Tiger",
  "last_name": "Nixon",
  "position": "System Architect",      
  "office": "Edinburgh",
  "extn": "5421",      
  "salary": "320800",
  "start_date": "2011-04-25"
}
@Code If Not item is Nothing Then End Code
       ,   
@Code End If       
  Next
End Code

 ],
  "options": [],
  "files": []
}
Note que cuando quito el For Each no hay problema para cargar los datos de la pagina adendum1 en el dataTable, pero lo que requiero es con el for each ya que de ahi obtengo los datos de la BD para llenar el dataTable

*La pagina de adendum1 esta un poco rara ya que uso web pages de webmatrix

4
  • los datos de tu DB los obtienes por ajax? y no puedes cargar tu DataTable con ellos?
    – sioesi
    Commented el 11 nov. 2016 a las 15:24
  • @sioesi asi es, de acuerdo a la configuracion del datatable hay dos ocaciones en donde invoco la pagina a traves de ajax una es "editor = new $.fn.dataTable.Editor({..})" y la otra es "$('#example').DataTable({...})"
    – Ivxn
    Commented el 11 nov. 2016 a las 15:27
  • pero se supone que debes hacer que tu var tabla_html = $("#tabla").DataTable y su configuracion. Luego cargas los datos como a una tabla normal, un each o algo asi
    – sioesi
    Commented el 11 nov. 2016 a las 15:29
  • @sioesi pero no se como podria hacerlo
    – Ivxn
    Commented el 11 nov. 2016 a las 18:35

2 respuestas 2

0

Yo hice algo similar replicando una dinámica de angular.js que es el famoso "ng-repet" y mas o menos es asi:

var $g = {};

$g.datos = [
  {"id": 1,
  "cuenta": "cuenta no. 1",
  "razon": "razon social 1"},
  {"id": 2,
  "cuenta": "cuenta no. 2",
  "razon": "razon social 2"},
  {"id": 3,
  "cuenta": "cuenta numero 3",
  "razon": "razon numero 3"},
  {"id": 4,
  "cuenta": "Titulo",
  "razon": "Hola mundo"}
];


$g.cargar_db = function () {
  var Repeat = $('[repeat]'),
      Tpl;
  
  $.each($g.datos, function (index, value) {
      Tpl = Repeat.clone();
      Tpl.find("*:contains({{ID}})").text(value.id);
      Tpl.find("*:contains({{CUENTA}})").text(value.cuenta);
      Tpl.find("*:contains({{RAZON_SOCIAL}})").text(value.razon);
      
      Repeat.after(Tpl);
  });
  Repeat.remove();
};

//Document ready
$(document).ready(function () {
    $g.cargar_db();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>CUENTA</th>
        <th>RAZON SOCIAL</th>
        <th>Edit / Delete</th>
      </tr>
    </thead>

    <tfoot>
      <tr repeat>
        <th>{{ID}}</th>
        <th>{{CUENTA}}</th>
        <th>{{RAZON_SOCIAL}}</th>
        <th>Edit / Delete</th>
      </tr>
    </tfoot>
  </table>

Puedes usar una "apirest" para obtener los datos con AJAX como en tu ejemplo y sirve de igual manera.

Espero te funcione. saludos.

0

La solución que he realizado para este caso es que en la pagina adendum1, estaba mal la cadena JSON que formaba, por que al final de cada {"variable":"valor"} debe ir una coma, entonces hice una comparacion para que el ultimo registro no llevara coma solo la llave o corchete y quedo asi:

{
      "data":  [
            @Code 
                Dim i = 1
                For Each item In muestraAdendum
            End Code
{
        "DT_RowId":"row_@i",
        "first_name":"xxx",
        "last_name":"aaa",
        "position":"@item("ID")",
        "email":"@item("CUENTA")",
        "office":"@item("ICCID")",
        "extn":"@item("TELEFONO")",
        "age":"@item("IMEI")",
        "salary":"@item("EQUIPO")",
        "start_date":"@item("ID")"
@Code If i <> muestraAdendum.Count Then End code
},
 @code Else end code
} 
@code            
          End If
End Code
@Code                    
    i = i + 1
    Next
End Code

],
  "options": [],
  "files": []
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.