Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 81387 articles
Browse latest View live

How to manually work with inline editing

$
0
0

Hello,

I've been trying to implement inline editing to our datatables (using the trial, to try it out).

The client sided version is ready, but we want to do the server sided handling ourselves.

However, I'm very confused on how to send the data back to the client.

This is my current code:

var editor = new $.fn.dataTable.Editor(
    {
        ajax: '/api.php',
        table: '#table',
        fields: [
            {
                'name': 'column1',
                'label': 'Column 1'
            },
            {
                'name': 'column2',
                'label': 'Column 2'
            }
        ],
        idSrc:  'ID'
    }
);

$('#table').on('click', 'tbody td:not(:first-child)', function(e) {
    try {
        editor.inline( this, {
            submitOnBlur: true,
            submit: 'changed'
        } );
    } catch(e) {
        console.log(e);
    }
});

It sends the data fine and we're able to read it, work with it and stuff. But then I send the data back like this:

{
    "data": {
        DT_RowId: 99,
        ID: 99,
        column1: 'value',
        column2: 'value'
    }
}

after I send this data, the row just disappears on me in the DataTables (Not in the data). When I refresh the page the data returns to me like normal.

I'm not sure what DT_RowId is, I've been looking in the documentation on how the client should receive the data, and they all showed DT_RowId even though the javascript didn't show any DT_RowId column, so I thought it was needed. but it doesn't do anything for me.


Add class to first row in initComplete

$
0
0

I am using DataTables I want to select First row of my table and add "DTTT_selected" class to first row .

I have successfully select the first row, but when I add class it adds "DTTT_selected" to all Rows instead of first selected row.

The Code is :-

table = $('#resultTable').DataTable({
aaSorting: [],
ajax: {...},
columnDefs: [...],
initComplete: function () {
    console.log('DataTables has finished its initialisation.');
    var api = this.api();
    var CurrentRow = api.row({ order: 'current' }, 0);
    CurrentRow.select(); //Working Fine
    CurrentRow.$('tr').addClass('DTTT_selected'); // Results all Rows get class DTTT_selected
    }
  }
});

Can Some one help me how can I do this ?

PDF Export Styles

$
0
0

I want to style the exported pdf. in the console.log(doc) I see some styled named tabelHeader,...
Is it possible to change these settings?
I tried with

                    customize: function(doc){
                        styles: {
                            tableHeader:{
                                fillColor:"#F0F8FF"
                            }
                        }

But this did not work.

Andreas

how to get added key in server side

$
0
0

this is what my server side return

{"sEcho":0,"iTotalDisplayRecords":0,"iTotalRecords":4119,"totalQty":12,"aaData":[]}

i want to log the totalQty

var table = $('#example').DataTable({
            //"order": [[ 1, "asc" ]],
            "bSort" : false,
            "bFilter": true,
            "dom": '<"wrapper"flipt>',
            "serverSide": true,
            "processing": true,
            "ajax": {
                'type' : 'GET',
                'url' : base_url+'Phoenix/ssPhoenix',
                data : function(d){
                    d.comp = "PPH",
                    d.agent = $("#vwAgent").val(),
                    d.stat = $(".sel-stat").parent().attr("title")
                },
                                function (data, callback, settings) {
                      console.log(totalQty);
                   }
        });

i want to use that totalqty, so i want to know how to get it.

How idSRC works

$
0
0

Hi Support,
I have slno unique key auto increment mysql table field.
I want to update row using editor using slno but do not want to display slno in table . can i use idSRC for this purpose or any other way to do this.

Regards.
Sunil

Print multiple data tables on a single button click

Server-Side processes fails

$
0
0

Odd issue with Editor 1.6.1 using the new Oracle integration. Normal usage works great - but if I set processing/server-side bits, searching fails and the footer always says, "Showing 0 to 0 of 0 entries (filtered from NaN)". This seems to work great from MySQL, but not from Oracle.

Trying to dig into things, but I didn't see this being reported (or if anyone else is using Oracle yet).

Complex headers & Responsive - Not working anymore

$
0
0

In the latest version of DataTables & Responsive, complex headers stopped working.
Before, it used to compute properly the table headers, remove what is not needed and adjust the row/col spans.
Now, it adjusts the visibility instead of removing/adding TH elements, but it doesn't do so properly in case of complex headers.

Here is a live demo
http://live.datatables.net/ceheqequ/1/

When viewing as desktop, all is fine. Now start shrinking down the view, and see what happen.
The header always has the first th row, even when it is not needed. And it causes the Contact columns to jump to the HR-info section.


Question about DataTables Editor

$
0
0
  1. When I receive the HttpRequest in ApiController, can I know, in the ApiController, whether the request is from create, edit or delete action?

  2. If I want to set the key columns read only, can I control the columns in the create view not read only but the columns in the edit view read only?

  3. There is a validator which can validate whether the column is unique in ApiController. If there are compound keys, can I use validator to check the uniqueness of the compound keys? If no, is there any solution to validate the uniqueness of compound keys?

htmLawed.php

$
0
0

Hi!
I use datatables 1.10, but php is still 5.3.

I get this error:
<b>Warning</b>: explode() expects parameter 2 to be string, array given in <b>/Applications/MAMP/htdocs/amministrazione/Datatables/php/Vendor/htmLawed/htmLawed.php</b> on line <b>181</b><br />

I think it's something wrong with my php version as here:

https://datatables.net//forums/discussion/comment/85059/#Comment_85059

I can't update it. How can I do?

Thanks
Pat

Generator CSS Files - HTTPS Warning

$
0
0

Hi Alan

demo.css and generator.css have hard coded http:// links that throw an error when loaded over https.

This works:

@import url(//fonts.googleapis.com/css?family=Raleway:100);

Kind Regards,

Change button language

$
0
0

I want to change the previous and next button languages, currently I have this code on:

$(tablePosts).DataTable({
"order": [
[ 1, "desc" ]
],
"language": {
"lengthMenu": "Mostrar _MENU_ posts por página",
"zeroRecords": "Nenhum post encontrado",
"info": "Mostrando página _PAGE_ de _PAGES_",
"infoEmpty": "Nenhum post disponível",
"infoFiltered": "(filtrado do total de _MAX_ posts)"
}
});

how can i change the background color for a cell "excel export"

$
0
0

i can't find a way to change the background of a cell i used the customize option for the export but they only give u a specific style number from 0 to 66 this is the exemple i saw https://datatables.net/reference/button/excelHtml5 but i can't change a style by adding a specific background or create my own style this is the code i use it work fine i only need to add a background to a cell

"buttons": ['pageLength',
{
extend: 'excel',
text: 'Export excel',
footer:true,
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="G"]', sheet).each( function () {
if ( $(this).text()>= 1) {
$(this).attr( 's', '56' );
}
});
},
exportOptions: {
columns: ':visible',
}
}
],

How to use Datatables jQuery UI datetime picker outside of the table.

$
0
0

Good Afternoon Allen, Everyone,

First, I just want to say I absolutely LOVE DataTables. The software is superb and the documentation, examples, community and forums are second to none! I have finally run into an issue that I can't figure out with your samples and docs, however.

I am building a CRM for our office using DataTables as it's backbone. This is on a LAMP server with MySQL.

My issue is this. I want to use the same date/time picker that is used by DataTables in the Entry Date column bubble edit (scroll all the way to the right) outside of the table. And click on any cell in the Entry Date column.

Specifically, I want to be able to use that same picker to populate the Date, Start Date, and End Date fields you will see if you Click the "Filter Button" at the top, but instead I just get the standard jQuery UI datepicker.

I'm adding these to the text inputs with the following in the Table instantiation:

"fnInitComplete": function(oSettings, json) {
// Add datepickers to the date filter fields.
    $( "#quick_filter_date" ).datepicker({
        dateFormat: "mm-dd-yy"
    });
    $( "#quick_filter_start_date" ).datepicker({
        dateFormat: "mm-dd-yy"
    });
   $( "#quick_filter_end_date" ).datepicker({
        dateFormat: "mm-dd-yy"
   });
}

Is there a way to call the same pickers used in the bubble edit for the Entry Date field, but used outside of the table? I'd like my datepickers to match.

Now, I could just go get the datetime plugin separately, and then style it the same, but I feel like I'd be loading the jQuery UI datepicker plugin twice if I do it that way.

I'm sure this is something obvious I'm just missing, but changing .datepicker above to .datetimepicker throws an error and I'm reasonably sure calling these in the fnInitComplete function should ensure they are called after the Datatables bundled itself is called. (In addition to this code being called in the foot when the Datatables stack is all called in the head)

Thank you for your time!

Suggestion/Autocomplete option values for input

$
0
0

I'm appending options to an input to show suggestions when searching for a value. The below is looking only in the current json though ... (so the first 100 values (at beginning) out of 10000 records). Is it possible to not limit the values to 100 and use the whole returning name.php ?

<input class="input-name form-control" list="datalist-name" type="text">
<datalist id="datalist-name"></datalist>

table = $('#my_table').DataTable( {
        dom: "Blfrtip",
        ajax: {
              url: "/name.php",
              type: "POST",
              data: function (d) {  } },
        serverSide: true,
        processing: true,
        columns: [
            ...
        ],
        lengthMenu: [100, 250, 500],
        'initComplete': function(settings, json) {

        $.each(json.data, function (i, item) {
            var name = item.name;
        $('#datalist-name').append('<option value="' + name + '">' + name + ' </option>');

            });

        }
    } );

Many thanks


Wrong column sorting

$
0
0

Hi,
I have a column with integers, but datatables sorts it in a wrong order.

Debug:
https://debug.datatables.net/ukoqop

Client code below:

DataTable({
    processing: true,
    serverSide: true,
    stateSave: false,
    stateDuration: -1,
    pagingType: 'full_numbers',
    renderer: 'bootstrap',
    tabIndex: 1,
    ajax: {
        url: 'some_url',
        type: 'get',
    },
    columns: [
        {data: 'id', type: 'num', name: 'article_rating.id'},
        {data: 'name', name: 'name', type: 'string', searchable: true},
    ],
    order: [[0, "desc"]],
    pageLength: 100,
    searchDelay: 1000
});

Please, help!

Embed MP3 into Editor modal window

$
0
0

Hi Alan

I store mp3 call-recording tags in my DB.

Here is an example:

<audio src='http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3' controls preload='none'></audio>

These tags render as a sound player in DataTables. However, they obviously render as a tag in a field in the Editor modal window.

It would be beneficial to our workflow if we could play the recording from editor as we are typing notes about the call into the editor.

Unfortunately the recording stops when the Editor modal launches.

Is it possible to inject raw html into the modal so that I can render the player within the modal Editor window?

Many Thanks.

print/pdf

$
0
0

i am using datatables with jeditable. when i edit a text field in the table it updates the database and changes the data in the table but when i either print or pdf the table the values from the original load show rather than the edited values.

Error to show details

$
0
0

Hello!!

I'm create a Datatable with RowDetails

Radomly I recive this error:

Uncaught TypeError: Cannot read property '_detailsShow' of undefined
at u.<anonymous> (datatables.min.js:132)
at Function.isShown (datatables.min.js:114)
at HTMLTableCellElement.<anonymous> (monitoralertas.aspx:335)
at HTMLTableElement.dispatch (jquery-1.10.2.min.js:5)
at HTMLTableElement.v.handle (jquery-1.10.2.min.js:5)

This error appears when I click the button (+) on my Grid

Steps:
1) I have a filter section, when I push the button Search this button call to the function Buscar(). I use the filter section to launch the ajax Rq with parameters

..
function Buscar() {
document.getElementById("Datos").style.display = ""; //Poner el stulo del DIV
$('#KPIAlertas').DataTable().clear()
$('#KPIAlertas').DataTable().destroy()
$.fn.dataTable.moment('DD/MM/YYYY H:mm:ss');
var table = $('#KPIAlertas').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'print'
],
"ajax":
{
"url": "./ajax/alertas.ashx",
"type": 'POST',
"data": { "op": "GetAlertas", "a_codi": ObtenerFiltroCliente()}
},
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "Cliente" },
{ "data": "Alerta" },
{ "data": "Fecha" },
{ "data": "ValorTotal", "width": "10", "className": "dt-body-center" },
{ "data": "ValorRegistrado", "width": "10", "className": "dt-body-center" },
{ "data": "Valor", "width": "10", "className": "dt-body-center" },
{ "data": "ActualKPI", "width": "10", "className": "dt-body-center" },
{
"data": function (data, type, row, meta) { if (data.FechaRevisada == "") return false; else return true; }, "width": "10", "className": "dt-body-center",
"render": function (data, type, row, meta) {
if (row.FechaRevisada == "") {
return "<img id=IRes_" + row.id_ale + " src='./img/PRevisada.png' onclick='VerificarAlerta(" + row.id_ale + ",1)' />";
}
else {
return "<img id=IRes_" + row.id_ale + " Title='" + row.FechaRevisada + "'src='./img/Revisada.png' onclick='VerificarAlerta(" + row.id_ale + ",0)'/>"
}
}
}
],
"order": [[1, 'asc']],
"pageLength": 25,
"language": {
"url": "./lang/datatable.json",
buttons: {
copy: 'Copiar',
copyTitle: 'Copiado al portapapeles',
copySuccess: {
_: '%d lineas copiadas',
1: '1 línea copiada'
},
print: 'Imprimir'
}
}
});
// Add event listener for opening and closing details
$('#KPIAlertas').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
//var childrenHtml = ObtenerHTML(row.data());
ObtenerHTML(row.child, row.data())
// row.child(childrenHtml).show();
tr.addClass('shown');
}
});

    }

...

Can you help me?

How to get ordering working with DataTables using typescript/require

$
0
0

Hey everyone and thanks in advance for any help you can provide.

I'm using DataTables with typescript and require. I've run into an issue where the ordering isn't working. When I take it out of typescript and require and just use it with normal JS, the ordering works fine with identical code. Any idea what could be causing this?

This is the typing file Im using
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery.datatables/index.d.ts

And here is the code

requirejs(["/Weblink2/Scripts/plugins/datatables.js"], function (datatables) {
    $.extend(true, $.fn.dataTable.defaults, {
        "paging": false,
        "ordering": false,
        "info": false,
        "searching": false,
        "processing": true,
        "serverSide": true,
        language: {
            processing: loadingMarkup,
        }
    });

    $('#EinTable').DataTable({
        "ajax": "/weblink2/MaintenanceSupport/MyAccount/ManageProvidersDataTables?idType=E",
        "columns": [
            {
                "title": "Proivider Name", data: function (data) {
                    if (data.Entitytype == null) {
                        return "<strong>" + data.ProviderName + "</strong>"
                    }
                    else {
                        return data.ProviderName
                    }
                }
            },
            { "title": "ID", "data": "Id" },
            {
                "title": "Entity Type", data: function (data) {
                    if (data.Entitytype == 2) {
                        return "<select id='Entitytype' name='Entitytype' class='form-control'>\
                            <option value='2' selected='selected'>Group</option>\
                            <option value='1' >Individual</option>\
                        </select>"
                    }

                    else if (data.Entitytype == 0 || data.Entitytype == 1) {
                        return "<select id='Entitytype' name='Entitytype' class='form-control'>\
                            <option value='2' >Group</option>\
                            <option value='1' selected='selected' >Individual</option>\
                        </select>"
                    }
                    else {
                        return "<select id='Entitytype' name='Entitytype' class='form-control input-validation-error'>\
                            <option value='' selected='selected' ></option>\
                            <option value='2' >Group</option>\
                            <option value='1'  >Individual</option>\
                        </select>" }
                }
            },
            {
                "title": "Active Status", data: function (data) {
                    if (data.Active == 1) {
                        return "<select id='Active' name='Active' class='form-control'>\
                            <option value='1' selected='selected'>Active</option>\
                            <option value='2' >Inactive</option>\
                        </select>"
                    }
                    else {
                        return "<select id='Active' name='Active' class='form-control'>\
                            <option value='1' >Active</option>\
                            <option value='2' selected='selected' >Inactive</option>\
                        </select>"
                    }
                }
            }
        ],
        "columnDefs": [
            { "width": "40%", "targets": 0 },
            { "width": "20%", "targets": 1 },
            { "width": "20%", "targets": 2 },
            { "width": "20%", "targets": 3 }
        ],
        "order": [0, "asc"]
    });
Viewing all 81387 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>