Answers

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  April 17

  You are setting up the columnDefs variable to pass to columnDefs on initialisation? That looks fine to me. I'd use render and data rather than the legacy mRender and mData, but otherwise, I think that is okay.

  Allan
• maurocatania Posts: 3Questions: 1Answers: 0

  April 18

  i get columnDefs from a controller (i'm using MVC) and then i edit it and do this:

  if (editarEnGrilla === true) columnsDef = columnsDefEdit;

          table = $('#tbl_vista_' + idVista).DataTable({
              sScrollY: "10vh",
              sScrollX: "100%",
              sScrollXInner: grillaWidth,
              bFilter: true,
              bAutoWidth: response.AutoWidth,
              bJQueryUI: true,
              bPaginate: bMuestraPaginado,
              iDisplayLength: iPaginado,
              bProcessing: true,
              iSearchDelay: 1000,
              oLanguage: {
                  sSearch: "Buscar en vista",
                  sEmptyTable: "No existen registros para mostrar.",
                  sLengthMenu: " Mostrar    _MENU_  registros por página.",
                  sZeroRecords: "No existen registros para mostrar.",
                  sInfo: "Página  _PAGE_  de  _PAGES_",
                  sInfoEmpty: "No existen registros para mostrar.",
                  sInfoFiltered: "(filtrado a partir de  _MAX_  registros en total)",
                  sLoadingRecords: "Por favor espere. Cargando registros...",
                  decimal: ",",
                  thousands: ".",
                  oPaginate: {
                      "sFirst": "<<",
                      "sLast": ">>",
                      "sNext": ">",
                      "sPrevious": "<"
                  }
              },
              aoColumns: columnsDef,
              aaData: oDatos,
              sPaginationType: "full_numbers",
              "rowCallback": function (row, data, index) {
                  if (data.BackgroundColor) {
                      $('td', row).css("background-color", data.BackgroundColor);
                  }
                  if (data.TextColor) {
                      $('td', row).css("color", data.TextColor);
                  }
              },
              "fnDrawCallback": function (oSettings) {
                  var i = 0;
                  var j = 0;
                  //Setea los valores del data-row-index y data-column-index 
                  //para poder ubicar las celdas por fila y columna después de ordenar o agregar filas
                  $('#tbl_vista_' + idVista + ' tbody tr').each(function () {
  
                      $(this).children("td").each(function () {
                          $(this).children().data('row-index', i);
                          $(this).children().data('column-index', j);
                          j++;
                      });
                      j = 0;
                      i++;
                  });
                  $('#tbl_vista_' + idVista).css('margin-left', '0');
              },
              "headerCallback": function (thead, data, start, end, display) {
                  if ($(thead).find('th:first')) {
                      var checkAll = $(thead).find('th:first').find('input[name="select_all"]');
                      if (checkAll.length > 0) {
                          checkAll.parent().find('span').remove();
                          checkAll.closest('div').css('padding', '0px');
                          checkAll.closest('th').css('padding', '0px');
                          checkAll.closest('th').css('width', '34px!important');
                          checkAll.closest('th').css('max-width', '34px');
                      }
                      checkAll = null;
                      delete checkAll;
                  }
              },
              sDom: "<'H'l<'#infoRegistros'>f>rt<'F'ip><'clear'>",
              order: []
          });
  

  a lot of this code isn't mine (i'm guessing someone at my work who doesn't work here anymore did it) and i need to modify it. In columnsDefEdit there are all of the edits made in mRender (i'm actually just guessing cause i dont really know how Data Table works, but i'm pretty sure the changes are all in mRender as shown in my question). The thing is, this is the result:

  

  the buttons in the table are one of the edits made. I want to make a new column for them, cause right now they are "sharing" the column with the checkbox. I dont really know how to do this
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  April 18 Answer ✓

  I'd add it to the columnDefs array - e.g.

  if (editarEnGrilla === true) {
    columnsDef.push({
      title: 'Edit',
      data: null,
      render: function (data, type, row) {
        // create and return the buttons
      },
      target: columnsDef.length
    });
  }
  

  Note in particular the use of target: columnsDef.length - that will resolve to the length of the array before the new column is added, thus adding an extra column.

  Allan
• maurocatania Posts: 3Questions: 1Answers: 0

  April 18

  thank you so much! it worked