i want to add individual search in column head when user press head text create input box and search and beside this box i want to add sorting functionality...is it possible.?? if yes then how......?

Hi,

I have a hkptu.json file. And I am using DataTable ajax with json object but when it load the json file, it throwed error as below.

Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.dataTables.min.js:48
at i (jquery.dataTables.min.js:35)
at Object.success (jquery.dataTables.min.js:35)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

NECESITO AYUDA, TENGO UNA TABLA DONDE TRAIGO POR JSON DATA Y CUANDO ACHICO LA TABLA NO FUNCIONA OH NO SE ACOMODA AL TAMAÑO LA PARTE DEL <thead> ME DESCUADRA TODO, NECESITO UNA AYUDA URGENTE.

$('#myTable').DataTable({
"bAutoWidth": false,
"ajax": "modelo/vista/json_vista.php",
"destroy": true,
"responsive": true,
"scrollX": true,

    "columns": [
        {
            "orderable": false,
            "render": function (data, type, full, meta) {
                var id_marca = full.I043ID_MARCA;
                return '<center><a class="manito" onclick="buscar_editar(' + id_marca + ')"> <span class="glyphicon glyphicon-edit"></span> </a><center>';
            }
        },
        {"data": "V043NOMBRE"},
        {"data": "usuario"},
        {
            "orderable": false,
            "render": function (data, type, full, meta) {
                var id_marca = full.I043ID_MARCA;
                return '<center><a class="manito" onclick="buscar_eliminar(' + id_marca + ')"><span class="glyphicon glyphicon-remove-sign"></a></center>';
            }
        }
    ],
    "order": [[1, 'asc']],
    "dom": 'T<"clear">lfrtip',
    "scrollX": true,
    "tableTools": {
        "aButtons": [
            "print"
        ]
    }
});

PARTE HTML:

NECESITO SU AYUDA POR FAVOR CUANDO ACHICO LA PANTALLA LA PARTE TBODY HACE EL RESPONSIVE PERO EL THEAD NO SE QUEDA ESTATICO.

.

Hello,

I am French and I have a problem with my datatable.

I have some columns on my datatable, and I want to be able to make a search with external inputs.

So I have 5 columns, 5 inputs type of text on a different div than datatable.

How can I make a filter or a search for each inputs to an individidual column ?

ex : an intput can make a filter or search only for the column 'name', or by clicking a button ?

I see a lots of example and worked for me....

Hi Guys I have 2 datatables
dtInvoices & dtInvoiceDetails

dtInvoice has the following columns
date - orderNo - net - vat -Total
I have 2 methods of editing dtInvoiceDetails inline & the editor window.
In this table I have columns
quant - sell - nett - lineTotal - vatRate

What is the event so I can calculate the lineTotal when the quant/ sell amounts change ( either by inline or the editor window)

I also have need the sum of lineTotal to add to the dtInvoice table.

I have this so far.

On the dtInvoice click

  $('#dtInvoices').on( 'click', 'tbody td', function () {
        //alert( tableInvoices.cell( this ).data() )
        currentSelectedInvoiceIndex = tableInvoices.row( this ).index() ;
        alert(currentSelectedInvoiceIndex);
} );

The invoice total is column 2 so I can set the sum to cell(currentSelectedInvoiceIndex,2)

I can't find an example showing this.

So I need

1. Get the onChange event of a row/cell and calculate the line total
2. Then calculate the sum of the column lineTotal
3. Set the total in dtInvoices.

Cheers

Steve Warby

Can't find an example anywhere.

I have the row index of tableInvoices

$('#dtInvoices').on( 'select.dt', function ( e, dt, type, indexes ) {
      selectedInvoiceID = tableInvoices.cell('.selected', 0).data();
        if (currentInvoiceID !== selectedInvoiceID )
            {
                selectedInvoiceIndex = table.row( this ).index() ;

            }
      } );

Elsewhere I calculate some totals and need to post these into dtInvoices

I see

editorInvoices.set( 'invoice.totalNett', (total));

What is the syntax to update ( column 'invoice.totalNett' row selectedInvoiceIndex )

Cheers

Steve Warby

Hello,

I'm currently writing an application using Angular 2 and have it configured to use DataTables.net, DataTables.net-bs, and DataTables.net-select.

For the most part, everything looks and works great. With one exception, the pagination for the application shows up with as though no styling is applied.

I checked the source within the browser and the default classes and HTML structure is applied:

<div class="dataTables_paginate paging_full_numbers" id="myTable_paginate">
    <a tabindex="0" class="paginate_button first disabled" id="myTable_first" aria-controls="myTable" data-dt-idx="0">First</a>
    <a tabindex="0" class="paginate_button previous disabled" id="myTable_previous" aria-controls="myTable" data-dt-idx="1">Previous</a>
    <span>
        <a tabindex="0" class="paginate_button current" aria-controls="myTable" data-dt-idx="2">1</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="3">2</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="4">3</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="5">4</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="6">5</a>
        <span class="ellipsis">…</span>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="7">580</a>
    </span>
    <a tabindex="0" class="paginate_button next" id="myTable_next" aria-controls="myTable" data-dt-idx="8">Next</a>
    <a tabindex="0" class="paginate_button last" id="myTable_last" aria-controls="myTable" data-dt-idx="9">Last</a>
</div>

The functionality of the links work and the it just looks ugly on the display because I'm using the DataTables Bootstrap CSS and it is not outputting the appropriate HTML using an unordered list. I went into the debugger in the browser and the code for the DataTables.net-bs is being loaded. I added a bunch of break points to the JavaScript and the factory method is being called. However, it appears that it is never called again.

Here is the relevant code for my vendors.browser.ts

require('datatables.net')();
require('datatables.net-bs')();
require('datatables.net-select')();
require('file-saver');

I also have AMD turned off because I know that was an issue for some people. Here is the relevant code for the webpack.common.js file:

        {
          test: /datatables\.net.*/,
          loader: 'imports?define=>false'
        },

As an aside, the other plugin, Datatables.net-select, functions properly.

If I can't figure this out, I can use the styling included in DataTables.net-dt, but I would much rather get this working properly.

Does anyone have any potential ideas on what is going on?

Was using the standard HTML5 export extension and noticed my PDF button didn't stop spinning after completion. Tried the online example https://editor.datatables.net/examples/extensions/exportButtons.html and noticed the same behavior. Tried with Firefox v57, Chrome v63 and Edge v25 with same results in all. Everything functions exactly as it should and produces the correct result, spinner just never stops?

Hello.
I'm using DataTables with Select extension.
select: {style: "single"}
So user selects a row by clicking on it.
I don't want the row to be deselected when user clicks on it again. Just do nothing.
Any informaton on how to stop deselect event?

"datatables.net": "^1.10.16",
"datatables.net-bs": "^2.1.1",
"datatables.net-select-bs": "^1.2.3",

jQuery(document).ready(function($) {
var table=$('#datatable').dataTable({
"bPaginate": false
});

$('#datatable_filter input[type="text"]').attr('placeholder', 'Table search');
$('#datatable_filter input[type="text"]').bind('keyup', function(e) {

if(e.keyCode == 13) {
var arrcount=(table.$('tr', {"filter":"applied"}).length);
if(arrcount>1)
{
alert("Please Enter Correct Search");
}
if(arrcount == 1)
{
console.log("arrcount",arrcount);
$('#status_1').val('2');
}
}
});
});
#status_1 is the input field id
i am using datatable 1.9.4

Hallo and sorry for that noob question. I looked around here in the forum and cant find a solution for my problem.

I am a php developer with not much experience in javascript.

i do habe a ajax script, which is used in a wordpress page to load a table in an tab of the page.
The ajax script is working fine and delivers the table as it should. But i cant find a way to do the reformatting with datatables.

Here is my ajax script:
<script type="text/javascript"> <!-- function swapContent(cv1, cv2, cv3, cv4, cv5, cv6){ $("#standingsoutput").html('<img src="loader.gif">').show(); var url = "standingsloader.php"; $.post(url, {Var1: cv1, Var2: cv2, Var3: cv3, Var4: cv4, Var5: cv5, Var6: cv6},function(data){ $("#standingsoutput").html(data).show(); }); } --> </script>)

The standingsoutput is the div tag who will get the table (and refresh it with parameters). Is there a way to do format the table with datatables after reload the area with ajax, and before shows it on the page?

I have tried loads of different ways to get this to work.

I am using this link

https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

What is the correct syntax to get this working please?

Cheers

Steve Warby

var editor; // use a global for the submit and return data rendering in the examples
var selectedQuoteID;
var table;
// add filter boxes

btnGetData.onclick=function(){

        $("#DataTable1").dataTable().fnDestroy();
        $('#DataTable1').empty();


     table = $('#DataTable1').DataTable( {

        "order": [[0, 'desc']],
        dom: "Bfrtip",
        autoWidth : true,
        responsive: true,
        ajax: "http://toolfolks.com/surplusAdmin3/php/upload-many.php",
        columns: [
            { data: "quotes.quoteID" , width : '25px', title : 'Quote No'},
            { data: "quotes.custID" , width : '25px', title : 'Cust No'},
            { data: "quotes.quoteDate" , width : '25px',  title : ' Date'},
            { data: "quotes.quoteTitle" , width : '150px',  title : ' Title'},
            { data: "quotes.notes" , width : '150px',  title : ' Notes'},
            { data: "quotes.notesInternal" , width : '150px',  title : ' Notes Internal'},
            { data: "sites.name" },
            {
                data: "files",
                render: function ( d ) {
                    return d.length ?
                        d.length+' image(s)' :
                        'No image';
                },
                title: "Image"
            }
        ],
        select: true

    } );

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
};

btnAddSearch.onclick=function(){

        $('#DataTable1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    //var table2 = $('#DataTable1').DataTable();




    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

}

Hi, I am have just implemented state saving and column reordering, however I realized that since my toggle buttons for column viability are by index (i.e table.column(21).visible( false ); ) it will not work if I reordered the columns. Is there a way of referencing a rowID instead of a row index

datatables 1.12.4.

i have a dom sourced table of about 1800 entries with pagination enabled.
In the footer i print the number of entries, this is generated by jquery. Below the table i print the number of rows from the db, this is generated by php).

These 2 numbers are off, i miss about 500 entries in the datatables footer, if i query it with jquery then i get the correct number of rows returned (see screenshot).

I have the following scenario

I have a Main Customer datatable.
When I click on a row It runs the following

$('#dtCustomers').on( 'select.dt', function ( e, dt, type, indexes ) {

      selectedCustomerID = tableCustomers.cell('.selected', 0).data();

          if (currentCustomerID !== selectedCustomerID )
            {
                getInvoices();
                getContacts();
                getCalls();
                currentCustomerID = selectedCustomerID;
                selectedCompanyName = tableCustomers.cell('.selected', 1).data();
                selectedAddress1 = tableCustomers.cell('.selected', 8).data();
                selectedAddress2 = tableCustomers.cell('.selected', 9).data();
                selectedAddress3 = tableCustomers.cell('.selected', 10).data();
                selectedTown = tableCustomers.cell('.selected', 11).data();
                selectedPostCode = tableCustomers.cell('.selected', 12).data();

                selectedDocType = 'Invoice';
            }
     } );

This then populates / filters the other tables.

I have another datatable which lists all the invoices and it allows me to find an invoice by number and select it for printing / amdending.

When I click on this I want 'action' the above.

I have

    $('#dtAllInvoices tbody').on( 'click', '.getInvoice', function () {

    var tr = $(this).closest('tr');
        if ( $(tr).hasClass('child') ) {
        tr = $(tr).prev();
    }
        var data2 = [tableAllInvoices.row( tr ).data()];

        selectedCustomerID = data2[0].invoice.CustID;
        selectedInvoiceID = data2[0].invoice.InvID;
        currentCustomerID = 0;
        console.log('selectedCustomerID = '+ selectedCustomerID);
        tableCustomers.columns( 0 ).search( selectedCustomerID ).draw();

        ChangeForm(Form1, "fade", "fade", 500);


                $('#dtCustomers tbody tr:eq(0) td:eq(0)').click();
                tableInvoices.columns( 0 ).search( selectedInvoiceID ).draw();

                selectedDocType = 'Invoice';

});


}

So I get the Customer datatable filtered to one customer
The click works and repopulates everything
And the Invoice table is filtered to the selected invoice number.

The only issue is the customer datatable has only one row and I need a 'reset the search' button.
( what is the syntax to clear search ?).

A better approach would be instead of

tableCustomers.columns( 0 ).search( selectedCustomerID ).draw();

populate the search input with the company name so I can then clear the search box when finished.

So how do I populate the search input with text and trigger it ?

Cheers

Steve Warby

How can i show a server-side error that send with json to the datatables. The error looks like this format:

{
    "type": "error",
    "icon": "fa fa-exclamation-triangle",
    "title": "404, Not Found",
    "text": "\r\n\t\t\t<p class=\"margin-left-5\">\r\n\t\t\t\t<span class=\"text-black weight-600\">Time:<\/span> 17.December 2017 17:37:36<br \/>\r\n\t\t\t\t<span class=\"text-black weight-600\">API:<\/span> \/meet\/88a9135f-7f17-467b-ad9b-7b7b8037a964\/clubs<br \/>\r\n\t\t\t\t<span class=\"text-black weight-600\">Message:<\/span><br \/>The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.\r\n\t\t\t<\/p>"
}

i read something with this:

$.fn.dataTable.ext.errMode = 'throw';

        evlist.on(
            'error.dt', function( e, settings, techNote, message ) {
                console.log(e);
            } );

but i can not read the json to display it.

Andreas

Hi!!
I make the checkbox adding this code in columnDefs.
```{
'targets': 7,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';

}

}```

Now I try complete the checkbox with data from PHP in JSON. In console I can see that parametre 'full' contains all de data but I can´t manipulate it. I need to compare what is the value of JSON for mark each checkbox.

Sorry for my english and I waitting for a response

I suspect that I am overlooking something very simple but I have spent a good bit of time searching for this without luck. I am looking to open a new data table via the use of a url segment where the parameter passed will be used in a where statement. I have no issues with the generation of the url (from another datable) or processing the variable once received, however it seems that anytime anything is added to the original base URL with a / datatables cannot parse this and is redirecting to this as an additional sub link . I have found topics where query strings are used, unfortunately this would require a good bit of a re-write for my site.

I am using displayStart to show records starting from 13 from a table with 32 records.

Table displays the default 10 records per page.

The resultant table displays from record 13!

However... the default paging buttons (bottom right) reads 3. I would expect this to be 2.

As an extra test, I tried table.page.info().page reads correctly '1' (counting from 0, is what I expect). Why is th paging button on 3? Is this a bug?

Is the value denoting the 'selected' page derived from the upper bound of the rows starting from 13 (13+10=23), which might explain the anomaly, in which case it would be a bug.

What do you think?

Sample code below.

$('#example').DataTable({

    dom: "Bfrtip",
    ajax: {

// Working Ajax
},
displayStart: 13, // Display from Row
order: [[ 1, 'asc' ]],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
// some other columns

    ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    buttons: [
            {
                text: 'info',
                action: function( e, dt, node, config ){

console.log(table.page.info());
console.log('the page we want to return to is: '+table.page.info().page);
}
},
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]

});

I used datatables fixed columns but on load my rows are not aligned. At first it was a tiny bit misaligned but as I scroll, the row misalignment becomes more and more misaligned.

On load this is what it looks like (note: the first two columns are the fixed columns)
1st photo
then if I scroll vertically at the bottom notice that the rows are not aligned at all
2nd photo