i have information that php run in single thread,what is datatable can run in multi thread

I'm using this code:

the filters show up, but doesn't work. What can be?
I'm using a table from HTML with id = reuniao.
Code from table:

I want to display hyper link in datatable column, here is my code.

url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ZipCodes')/items?"+
"$select=Title,City,State,Link&$filter=(State eq '"+state+"')&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}

    });
    call.done(function (data,textStatus, jqXHR){
        $('#example').dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "aaData": data.d.results,
            "aoColumns": [
                { "mData": "Title" },
                { "mData": "City" },
                { "mData": "State" },
                { "mData": "<<Hyper link>>" }
            ]
          });
    });

Hi!
I have a table that display 4 columns with data, i am using pageinate.
On of those is a picture. The loading time is very slow, almost 22-24 seconds.
I started looking into server-side processing but it said that you should only use this if you have at least several thousand rows of data.
So my question is: Do i use server-side processing or is there some other way to make it faster?

I have a Datatable that is defined in HTML solely as:

<table id="eventHistoryTable"></table>

In my JavaScript, I then initialize the table as follows:

        $('#eventHistoryTable').DataTable({
            "autoWidth": false,
            "searching": false,
            "paging": true,
            "info": false,
            "columns": [
               { data: "name",    title: "Name" },
               { data: "timestamp", title: "Date", render: function(data, type, row, meta) {
                   return new Date(data).toLocaleString();
               }}
            ],
            "order": [[1, "desc"]],
            "select": 'single'
        });

This works great. However, if I reduce the number of columns to just one column as in:

        $('#eventHistoryTable').DataTable({
            "autoWidth": false,
            "searching": false,
            "paging": true,
            "info": false,
            "columns": [
               { data: "timestamp", title: "Date", render: function(data, type, row, meta) {
                   return new Date(data).toLocaleString();
               }}
            ],
            "order": [[1, "desc"]],
            "select": 'single'
        });

an exception is now thrown with stack trace of:

Uncaught TypeError: Cannot read property 'aDataSort' of undefined
W   @   jquery.dataTables.min.js:66
xa  @   jquery.dataTables.min.js:70
(anonymous function)    @   jquery.dataTables.min.js:94
each    @   jquery.js:375
each    @   jquery.js:139
m   @   jquery.dataTables.min.js:86
h.fn.DataTable  @   jquery.dataTables.min.js:166
initEventSaveLoad   @   main.js:1339
(anonymous function)    @   main.js:125
j   @   jquery.js:3073
fireWith    @   jquery.js:3185
ready   @   jquery.js:3391
I   @   jquery.js:3407

I want some columns can be filtered by exact match, such as "5" will match 5, instead of 5, 15, 151 etc. After reading lots of examples here, I did it like this:

table.columns().eq( 0 ).each( function ( colIdx ) {
        $('input', table.column(colIdx ).footer()).on( 'keyup change', function () {
             var val =$(this).val();

 if(colIdx == 2)
        {
 var val = $.fn.dataTable.util.escapeRegex(val);
    var val = val ? '^'+val+'$' : '';
                  table````
                       .column(colIdx)
                       .search(val, true, false)
                       .draw();
          }
         else{
            table
                .column(colIdx)
                .search(val)
                .draw();
            }
 } );

However, the search cannot match anything. Does some one have a solution? Thanks a lot in advance.

When attempting the display only the buttons in the header (rBtlip) it doesn't render the header properly. It places the buttons floating over the table headings. The odd part is that it works when I have another element in front of it (riBtlp).

Every time I call this function below the call to the web service is the same data.

function PopulateInventory()
{
var ddlCountryList, ddlCanadaStateList, ddlProductLineList, lsSKU, txtModel, txtDescription
ddlCountryList = $('.ddlCountryList').val();
ddlCanadaStateList = '';
ddlProductLineList = $('.ddlProductLineList').val();
lsSKU = $('#txtSKU').val();
txtModel = $('#txtModel').val();
txtDescription = $('#txtDescription').val()

                      var table = $('#tblInventory').DataTable({
                          processing: true,
                          serverSide: true,
                          ajax: {
                              type: "POST",
                              dataType: 'json',
                              url: 'Data.asmx/GetInventoryData',
                              data: {
                                  'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
                              },
                              dataSrc: 'data'
                                              ,     success: function (data) {
                                      console.log(data)
                                  }
                          },
                          destroy: true,
                          //deferRender: false,
                          retrieve: true,
                          stateSave: false,
                          oLanguage: {
                              "sSearch": 'Search Results'
                          },
                          responsive: true,
                          orderClasses: true,
                          caseInsensitive: true,
                          stripeClasses: ['GridLight', 'GridDark'],
                          pageLength: 10,
                          crossDomain: true,
                          columns: [
                              { mDataProp: "CustomerDisplayName" },
                              { mDataProp: "ModelNo" },
                              { mDataProp: "SkuNo" },
                              { mDataProp: "ItemDescription" },
                              { mDataProp: "QtyAvailable" }
                          ],
                          columnDefs: [
                                      {
                                          type: 'sort-numbers-ignore-text', targets: 4
                                      }]
                      });

}

When I call separate ajax code I get new data every time.

function PopulateInventoryData(aretrieve, astateSave, adestroy, apageLength, ddlCountryList, ddlCanadaStateList, ddlProductLineList, lsSKU, txtModel, txtDescription) {

     var request = $.ajax({
         type: "POST",
         dataType: 'json',
         url: 'Data.asmx/GetInventoryData',
         data: {
             'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
         },
         dataSrc: 'data',
         success: function (data) {
             console.log(data)
         }
     });

}

When I put them both in the same function I get 2 calls to the web service with different data being sent. Even when they are the same variable.

function PopulateInventory()
{
var ddlCountryList, ddlCanadaStateList, ddlProductLineList, lsSKU, txtModel, txtDescription
ddlCountryList = $('.ddlCountryList').val();
ddlCanadaStateList = '';
ddlProductLineList = $('.ddlProductLineList').val();
lsSKU = $('#txtSKU').val();
txtModel = $('#txtModel').val();
txtDescription = $('#txtDescription').val();

var request = $.ajax({
type: "POST",
dataType: 'json',
url: 'Data.asmx/GetInventoryData',
data: {
'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
},
dataSrc: 'data',
success: function (data) {
console.log(data)
}
});

                     var table = $('#tblInventory').DataTable({
                          processing: true,
                          serverSide: true,
                          ajax: {
                              type: "POST",
                              dataType: 'json',
                              url: 'Data.asmx/GetInventoryData',
                              data: {
                                  'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
                              },
                              dataSrc: 'data'
                                              ,     success: function (data) {
                                      console.log(data)
                                  }
                          },
                          destroy: true,
                          //deferRender: false,
                          retrieve: true,
                          stateSave: false,
                          oLanguage: {
                              "sSearch": 'Search Results'
                          },
                          responsive: true,
                          orderClasses: true,
                          caseInsensitive: true,
                          stripeClasses: ['GridLight', 'GridDark'],
                          pageLength: 10,
                          crossDomain: true,
                          columns: [
                              { mDataProp: "CustomerDisplayName" },
                              { mDataProp: "ModelNo" },
                              { mDataProp: "SkuNo" },
                              { mDataProp: "ItemDescription" },
                              { mDataProp: "QtyAvailable" }
                          ],
                          columnDefs: [
                                      {
                                          type: 'sort-numbers-ignore-text', targets: 4
                                      }]
                      });

}

What am I missing? I have tried every "reload" code under the sun. Please show me the way!

Good morning all,

I am using Editor Upload function to upload users photos and documents. I would like to use amazon S3 bucket as a repository for those documents.

I was wondering if this is possible and if an example of integration exists somewhere.

I did not find any evident google link.

ty
f

When using ColReorder extension with Buttons and Buttons.ColVis there is a bug i.e. when user change the order of a columns and manipulate their visibility by clicking one column name it changes the wrong button state (columns show/hide properly, but the buttons are mixed.

This bug can be reproduced on yours example: https://datatables.net/extensions/colreorder/examples/integration/colvis.html
1. move column "position" to another place
2. change the visibility of "position" column

Temporary fix is to comment line 105 "that.active(col.visible());" and add "button.toggleClass('active');" into line 93. But it is only temporary one - this doesn't work for show all/hide all

Hello everyone,

I'm trying to set an onclick event in each <tr> of my datatable, this is what I'm doing:

response.setDT_RowData("{ 'onclick' : \"reviewPurchaseOrder(this);\"}");

My response JSON looks like this:

{"sEcho":"1",
"iTotalRecords":1,
"iTotalDisplayRecords":2,"
data":[{"order":"PO-22-2016",
"DT_RowData":"{
\u0027onclick\u0027 : \"reviewPurchaseOrder(this);\"}",
"DT_RowId":"27080700723292166835522155310"
}]
}

This is my html:

<tr class="odd" role="row" id="27072580060722369635737438916"></tr>

The DT_RowId is working perfectly but I am not able to add the onclick event in each tr.

I really appreciate if somebody can give me clue about how to achieve this.

I am using exactly the code example on https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html, but it doesn't work. Clicking the first column of a row only highlighting the cell.

Are there any initialize steps that are not included in the example? Am I missing anything?

I am trying to troubleshoot my code by proofing that the example code works on its own.

Thank you.

I have created a table using jquery datatable. I am also using the responsive feature of the datatable for making it responsive. The code is working fine but the issue I am facing is that the the first column of the table is having a check-box and when we resize the table width to a lesser width collapsible option will appear like as shown below

Now when we click the checkbox the collapsible feature is working.

My code is as given below

Working Demo

<table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            :
        </tbody>
   </table>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="dataTables.responsive.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('#example')
                .DataTable({
                    "responsive": true,

                    "dom": '<"top"lf>t<"bottom"pi><"clear">'
                });
    });
</script>

Can anyone please tell me how to prevent collapsible and expandable when we click the checkbox

Hello,

I have a table that uses some colspan and rowspan, like this:

<thead class="bg-primary">
        <tr>
            <th colspan="2" rowspan="3" class="text-center">
                Grupo de Atendimento
            </th>
            <th colspan="1" rowspan="3" class="text-center">
                Campanha
            </th>
            <th colspan="4" class="text-center">
                Mailling
            </th>
            <th rowspan="3" class="text-center">
                Canais
            </th>
            <th colspan="5" class="text-center">
                Usuarios
            </th>
            <th colspan="11" class="text-center">
                <%= t(:item_71) %> - <%= t(:item_50) %> <%= @start_at.strftime("%H:%M") %> <%= t(:item_51) %> <%= @finish_at.strftime("%H:%M")%>
            </th>
        </tr>
        <tr>
            <th rowspan="2" class="text-center">
                Restantes
            </th>
            <th rowspan="2" class="text-center">
                Virgens
            </th>
            <th rowspan="2" class="text-center">
                Finalizados
            </th>
            <th rowspan="2" class="text-center">
                Agendamentos
            </th>
            <th rowspan="2" class="text-center">
                Livres
            </th>
            <th rowspan="2" class="text-center">
                Ocupados
            </th>
            <th rowspan="2" class="text-center">
                Intervalo
            </th>
            <th rowspan="2" class="text-center">
                Desconectados
            </th>
            <th rowspan="2" class="text-center">
                PE
            </th>
            <th colspan="2" class="text-center">
                Atendidas
            </th>
            <th colspan="2" class="text-center">
                Abandonadas
            </th>
            <th rowspan="" colspan="2" class="text-center">
                Espera
            </th>
            <th rowspan="" colspan="2" class="text-center">
                TNA
            </th>
            <th rowspan="2" class="text-center">
                NS
            </th>
            <th rowspan="2" class="text-center">
                Ocioso
                </th>
            </td>
            <th rowspan="2" class="text-center">
                AD
            </th>
        </tr>
        <tr>
            <th class="text-center">
                Qtd
            </th>
            <th class="text-center">
                Tempo
            </th>
            <th class="text-center">
                Qtd
            </th>
            <th class="text-center">
                Tempo
            </th>
            <th class="text-center">
                Qtd
            </th>
            <th class="text-center">
                Tempo
            </th>
            <th class="text-center">
                Qtd
            </th class="text-center">
            <th class="text-center">
                Tempo
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>

So, the problem is that when I apply datatable on this table it doesn't work property.

When i use, for example the function table.column( 2 ).visible( false ); datatable only hide the header, and not the entire column.

When i use

columnDefs: [
        { targets: [0, 1], visible: true},
        { targets: '_all', visible: false }
]

it hides the columns from the first line only.

I think the structure from the table isnt correct to datatables work, so anyone can help-me?

Thanks.

Looking around it seems like this error occurs when the HTML column count and the column definition for DataTables do not match. I recently updated from 1.10.0 to 1.10.12 to move from Table Tools to Buttons to enhance some export functionality and this problem started cropping up.

Spent a couple of days looking for a solution, but can't seem to get this resolved.

Here's a (minimal) fiddle with the error included:
https://jsfiddle.net/5a2oz62y/2/

Unless I'm missing something, I've got 5 columns in both sides of the table definition, but the error persists despite it looking like the style is being applied. In the actual application the error is blocking follow-on functionality. Can't help but feel like I'm overlooking something obvious.

Thanks in advance.

Is it possible to have this example here https://editor.datatables.net/examples/api/triggerButton.html but with the ability to submit multiple rows at once. I tried this but only the first row is passed, even when multiple rows are selected:

buttons: [

                { extend: "edit",   editor: editor },
                {
                  extend: "selectRows",
                  text: "Submit Selected Item(s)",
                  action: function ( e, dt, node, config ) {
                      var workOb = request_count_table.row( { selected: true } ).data().work ;
                      console.log( workOb.work_id ); //only one value is logged even though multiple rows were selected.
                }


            ]

For the select extension, the "select" and "deselect" events can be defined separately, as shown in this example. However, using the standard jQuery event combination method (i.e., each event separated by a space) does not work:

e.g.,

table.DataTable().on("select deselect", function (e, dt, type, indexes) {
        console.log("Not firing for both events...");
    }

searching the web for alternatives about having crud functionality into datatables, with several issues about all that examples, just checking if editor datatables work without mvc into asp.net
i have webservices, for get all the items, add item, delete item and edit item... but just webservice with json, not mvc

Editor can work with that?

Sorry if is a silly question, but that will be one of the variables to buy this plugin.

Thanks.

I am Working on project build with php Laravel for some reasons i cant get my laravel table to run properlly,So We have used datatables insteed but we are having issues with render() if i remove render() my css of all table is gone including search box paggination etc but if i let it on my page its getting issues with laravell footer calling the footer is hidden....Is thier any issues with the blade view & render view...Plz Suggest any solution...Thank you in advance

Hi All,

I would like to copy a specific cell with a unique id to another table. And I would like to have a validation check if the record already exists. If it exists already, a modal should pop up (with a 'Record already exists' message) and the process should be aborted. It would be great to have an inline button in the row of the record that copies the specific id to the other table.
Is this posssible and how? Does anybody have an example? I'm using Editor and DataTable and serverside.

Many thanks