Hi everyone! I have on my controller this method:

public function index_data()
{
    $productos = Product::with('category')
                        ->with('product_canals')->orderBy('name', 'ASC');

    return DataTables::eloquent($productos)->addColumn('prices',function (Product $product) {
                                return $product->product_canals->map(function($product_canal) {
                                    if($product_canal->canal->id == 1)
                                        return $product_canal->price;

                                })->implode('');
                            })->make(true);
}

And on the view I have this:

$(function() {
    $('#products').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('products_datatable') !!}',
        columns: [
            { data: 'name', name: 'products.name' },
            { data: 'category.name', name: 'category.name' },
            { data: 'prices', name: 'prices', render: $.fn.dataTable.render.number( ',', '.', 2, '$ ' ) },
        ]
    });
});

But the result for null value on price column show $ NaN.N

(see attached file)

Can you help me?

I'm loading table through ajax.

    $('#sample_1').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": baseUrl+"/admin/employee/getusers/type/admin/group/"+groupdata ,
        "aaSorting": [[ 0, "desc" ]],
        "bInfo":false,
        "aoColumnDefs": 
         [
            { "bSortable": false, "aTargets": [1,2,4,5,6,7,8] },
            
         ],
        "iDisplayLength":50,
        "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
        "fnDrawCallback": function( oSettings ) {
            re_init();
        },
            "language": {
            "lengthMenu": "_MENU_ "+records,
            "sZeroRecords": zerorecord,
            "sSearch":searchv+":",
            "sProcessing":processing+"...",
            "sLoadingRecords":loading+"...",
            "sEmptyTable":emptytable,
            
        },
}

Now I wanted to add button to export some data into excel file, so after the "language" I added

        dom: 'Blfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Report',
                text:"Export",
                exportOptions: {
                    columns: [1,2,3,4,5,6,7,8,9]
                }
            },
        ]

The table shows up. There are no errors, but the button is nowhere to be found. I have very similar export with different table on different site that works perfectly fine.

    $('#sample_1').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "bInfo":false,
        "aoColumnDefs": 
         [
            { "bSortable": false, "aTargets": [10] },
            { "bSearchable": false, "aTargets": [0,4,5,6,7,8,9,10] /*Not To include*/ }             
         ],
        "sAjaxSource": baseUrl+"/admin/lectures/getresults",
        "iDisplayLength":50,
        "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, alls]],
        "fnServerParams": function ( aoData ) {
            if(rl==1){
                aoData.push( {"name":"lectid","value":lectid},{"name":"b_group","value":b_group},{"name":"rl","value":1});
            }else{
                aoData.push( {"name":"lectid","value":lectid},{"name":"b_group","value":b_group});//
            }
        },
        "fnDrawCallback": function( oSettings ) {
            //re_init();
        },
        "language": {
            "lengthMenu": "_MENU_ "+records,
            "sZeroRecords": zerorecord,
            "sSearch":searchv+":",
            "sProcessing":processing+"...",
            "sLoadingRecords":loading+"...",
            "sEmptyTable":emptytable,
        },
        dom: 'Blfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Report',
                text:exportvar,
                exportOptions: {
                    columns: [1,2,3,4,5,6,7,8,9]
                }
            },
        ]
    } );

I didn't write that code originally, but now I'm stuck with it and I'm kind of lost.
Do you have any ideas?

Hi
I am using class="display" on a table .... If I render more than one table at initialisation, works 100% ... If I "inject" another table, after initialization, how do I bind it? Is this possible?

Dear Team,

I just use fixedColumns.min.js to fix column, and all of the library is the latest(include jquery,datatable.min,fixedColumns.min).

in my page ,we have 2 tab, every tab include a datatable,once change the tab, the datatable not dispplay fine, so i just invoke the below code to adjust the style. but there is en error show ".fixedColumns is not a function",could you tell me how to resolve it, many many thanks.
$.fn.dataTable
.tables({ visible: true, api: true })
.columns.adjust()
.fixedColumns().relayout();

Hi All
i need to have calculated column based on quantity and price . since im using row grouping plugin ,render method is not working with group total. so i need to know a way to do so in the editor window or at posting time within the editor instance.

i saw Field::inst but its for php i guess. so can some body en light me how to do it in mvc c#.

Thank You

Hello everyone,
Similar to the example in this, https://datatables.net/reference/option/searchCols,
I want to specify some intial values to some of the colmns, and search and show them as default search,

ex:
In column10 drop down intial value of seach must be "string" , it needs to be shown intially and can be changed

Hi All

I have a serialized json string like this.

[[null,null,null,null,null],[null,"Rough Costing",null,null,null],[null,null,null,null,null],[null,"Client","Ua Limited",null,null],[null,"Product",null,null,null],[null,"Pro: Name","Idam ",null,null],[null,"Est.: No",null,null,null],[null,"Time: period ","43299",null,null],[null,"Date","15th July - 2018",null,null],[null,null,null,null,null]]

this was a json conversion of csv file generated from a excel invoice file and my aim is to load the csv to datatable and let the users to get rid of the unwanted rows containing headings and section names and save the values to db.

but as you can see this string contains lots of nulls and no column names. and the table is in loading mode and cant see any relevant jquery error.

is this array valid for datatables with null values. is there any specific way to load this?

now im here but no much different even without column definitions.

`$(document).ready(function () {
$('#example').DataTable({
dom: "Bfrtip",
ajax: "/POPM_Trn_IOU/ExportToExcel",
"columns": [
{
"data": 0,
"defaultContent": ""
},
{
"data": 1,
"defaultContent": ""
},
{
"data": 2,
"defaultContent": ""
},
{
"data": 3,
"defaultContent": ""
},
{
"data": 4,
"defaultContent": ""
}
],
dataSrc: ""

});  
});

`
Thank You

HI

Open my site (see screenshot 1)
-> table is rendered
-> perfect
Click on the header-link (I use a jquery to collapse/store the status)
-> table is collapsed
-> fine
Click on page refresh
-> table is collapsed
-> fine
Display table via click on header-link
-> table is shown again
-> table is rendered in a new way
-> not perfectly shown (see screenshot 2)

I guess it is wrong rendered?! but i am not sure why?

BTW: will buy the license for editor next week - are data sent to you to check or is the check only for license?

Hi:
I recently want to build a tree view datatable via jquery. And I have read the data in
https://datatables.net/examples/api/row_details.html, but it still can not meet my project.
I hope it can run a scenario like following:
1. click the plus icon, and then show the detail data about the row, and the detail data
will consist many sub-rows, like a company may have hundreds products, and so on.
I see the example in row_details.html, and if we add angularjs to define that, is that possible
to meet that scenario, thanks.

I have a bootstrap menu and the dom elements are hidden under it. Also when I click "New" the editor window is partialy hidden also. Been struggling with this for hours and can't seem to find an answer.

Hi everyone,

I would like to add a timer per new entry on the datatable. Basically it's a Lunch app that records the DateTime when the user starts the lunch for an individual. How would I put a timer in the column that shows a countdown from 60min for example and then alert the user when the timer hits 00:00.

Here is my code so far, I have no idea how to use a timer...

var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#employeeTable").DataTable({
"ajax": {
"url": "/AppTeamLunch/GetData",
"type": "GET",
"datatype": "json",
"bJQueryUI": true,
"bServerSide": true,
"sAjaxSource": "AppTeamLunch",
},
"columns": [
{ "data": "TeamName" },
{ "data": "TeamColor" },
{ "data": "UserIDStart" },
{ "data": "DateStart" },
{ timer??? },
{ "data": "Status" },
{"data":"TeamLunchID" , "render" : function (data) {
return "<a class='btn btn-warning btn-sm' onclick=PopupFormEndLunch('@Url.Action("FetchEndLunch", "AppTeamLunch")/" + data + "')><i class='fa fa-pencil'></i> End Lunch</a>";
},
"serverSide": true,
"processing": true,
"orderable": true,
"searchable": true,
"width":'auto'
}
],
"rowCallback": function (row, data, index) {
$('td', row).eq(1).css('background-color', data.TeamColor);

            },
            "language": {

                "emptyTable": "There are currently no teams on lunch.",
                "processing": "Fetching Data..."
            }
        });
    });

setInterval(function () {
dataTable.ajax.reload();
}, 5000);

I use dataTable in my modal. when I click button, it load modal with table. It correctly happens in first and second time. But in third time, when I click the button, it load modal without dataTable.How can I resolve this?

var Table = $(element).DataTable({
            responsive: true,
            orderCellsTop: true,
            autoWidth: false,
            serverSide: false,
            processing: true,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            language: {
                processing: "<div class='sk-spinner sk-spinner-three-bounce'><div class='sk-bounce1'></div><div class='sk-bounce2'></div><div class='sk-bounce3'></div></div>"
            },

            ajax: {
                "url": "/web/user/id",
                "type": "GET",
                "error": function (e) {
                    alert(e);
                },
                "dataSrc": function (d) {
                    $(".modal-ajax-container").LoadingOverlay("hide");
                    return d
                }
            },
            deferRender: true,
            columns: [
                {"data": "id", "width": "5%", "visible": false},
                {"data": "name", "width": "10%"},
                {"data": "created", "width": "10%"},
                {"data": "updated", "width": "10%"}
            ],
            colReorder: true,
            dom: "<'row '<'col-sm-6'<'#b3'>><'col-sm-6'>> <'row'>" +
            "<'row'<'col-sm-6'> <'col-sm-6'>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            order: [[1, 'asc']],
            buttons: [],
            select: {
                style: 'multi'
            }
        });

This is button click function.

$("#btn-attach-custom").on('click', function (e) {
            $("#user-custom-modal").modal();
            $(".modal-ajax-container").LoadingOverlay("show");
            Table = Users.initPolicyPicker("#user-custompicker-table", userID);
}

HI,
I have use datatable in one of my project. actually it will fill on dropdown event change event. On first drop downevent it will perfectly fetch the records. but when i change my dropdown it will show me warning message as "**DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2**" and after getting this error no css applies to output. Please help to resolve this issue.

I wanted to implement a feature shown on this example here:

https://editor.datatables.net/examples/api/confirmClose.html

When creating a new form, and clicking outside of the box, you have to click "ok" or "cancel" 3 to 4 times.
When editing the form on non-number fields, like First name or Last name, you have to click "ok" or "cancel" 2 times.

Is there a fix for this in the works?

Hello,
i am trying to do serverside data fetch with individual searching inputs,
but i don't get any demo of how to handle the search input in the php file..
i saw your example here http://live.datatables.net/piqidoqo/1/edit
but there also your didn't share server_processing.php.
If you can please send me the content of server_processing.php that will very much help me in using data table.
I have also seen the server side processing script: https://github.com/DataTables/DataTablesSrc/blob/master/examples/server_side/scripts/server_processing.php
But this script doesn't show how to work with searching inputs or filter.
PLease HELP

The page: https://datatables.net/examples/data_sources/ajax.html, the 'Ajax' tab, has an example of an acceptable format for use in a Datatables table. I am fairly comfortable with sourcing data via MySQL now, but I have been struggling with getting data direct from text or CSV data and then outputting into the proper format. Here I am beginning with text data and processing it into array format with explode() and then into json data with json_encode() but my output from that doesn't contain the same pattern of brackets surrounding array data as those in the example above. At this point (with the code included here), I am receiving:

{"data":["Fruit, Apple","Fruit, Pear","Fruit, Orange","Berries, blue","Berries, black","Berries, goose","Berries, choke"]}

I am thinking that I need to have it look like:

{"data":[ ["Fruit, Apple"], ["Fruit, Pear"], ["Fruit, Orange"] .... ]}

My goal is to produce a DataTables table with a single column that contains:

     Fruit Apple
     Fruit Pear
     Fruit Orange
     Berries Blue
     Berries Black
     Berries Goose
     Berries Choke

My real-life project is dealing with something under 4,000 records.

Can you please check out http://live.datatables.net/kaladidi/1/ to see what I have manually come up with, and tell me what is wrong with my code there?

Back at home, I have as my Ajax (server side) program named my_data.php:

<?php
// NAME: my_data.php
the_data();  // I have embedded the raw data in a function

$array_data = explode("\n", del_empty_lines($all_data));   // convert data so 
foreach ($array_data as $key=>&$category) {            // category is on same
    if (!preg_match("/^[\s]/", $category)) {                // line
        $tmp_category = $category;
        unset($array_data[$key]);
    } else {
        $category = $tmp_category . ', ' . ltrim($category);
    }
} 
$my_data = array_values($array_data); // reset keys to 0,1,2, etc
// I have embedded the json_encode() function with an array of an array, hoping
// to get those brackets, but I know it's not correct.
$my_data = json_encode(array('data'=>$my_data));     //   <---- I think this is my problem

echo $my_data;    <--- final output for DataTables

function del_empty_lines($string) {
    return preg_replace("/(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+/", "\n", $string);
}

function the_data() {
global $all_data;
$all_data = "
Fruit
   Apple
   Pear
   Orange
Berries
   Blue
   Black
   Goose
   Choke
";
}

And here is my HTML/php file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YummyFood</title>
<! --  
       All script and css source files removed for brevity 
-->
<script>
$(document).ready(function() {

    // As a test, this worked:
    // var my_data = [
    //     ["Applesauce"],
    //     ["Peas and Carrots"]
    // ];

    $('#mainlist').DataTable( {
        processing: true,
        ajax: 'my_data.php',     
        //data: my_data,                  // I don't know if I need these statements
        // columns: [
        //    { data:'Category' }
        // ]
    });
});
</script>
</head>
<body>
<table id="mainlist" class="display">
     <thead>
         <tr>
             <th>Category</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>Category</td>
         </tr>
    </tbody>
</table>
</body>
</html>

Any assistance would be greatly appreciated. And I am definitely having fun.

please .....
I need to transform my dataTables pagination to button
because now its just a text, the button is not show up
is it possible ?

I'm trying to implement DataTable editor in my application and currently facing issue> Uncaught TypeError: extender is not a function whenonBlur: 'submit'is called.
When I tried to debug the lib I found out that there is no function _fnExtend which makes var extender = $[O12][J3p][u12][o3p]; extender undefined.

I have disabled the ordering in my datatables, but I see the in column 0 the sorting icon. Why did I see the icon? The Icon have no function. I use the BS3 Styling.

https://debug.datatables.net/ocokeb

Andreas

https://datatables.net/reference/api/ajax.reload()

I've been trying to use ajax reload with the the reset paging set to false for a server-side loaded table and the pagination gets reset to the first page on each call.

Is there a way to get this working with a server-side table?

Using Editor 1.7.2 for PHP