hi i am still a beginner in coding, help me how to make auto refresh datatable every 1 sec without eliminating the order function... Please give me example. Thanks

I've installed Editor-PHP-1.7.0 on my server, but I got a error running every editor example. I'm using 5.6.32 PHP version.

The link is :

http://safe-systems.net/digi-access/Editor-1.7.0/examples/simple/simple.html

In the browser network inspector I found a 500 error

I've check a server log and a got this error message:

PHP Parse error: syntax error, unexpected T_STRING, expecting T_CONSTANT_ENCAPSED_STRING or '(' in /home1/safesys1/public_html/digi-access/Editor-1.7.0/examples/php/staff.php on line 12

Before this installation I installed on XAMPP in my laptop running editor examples without a problem. I using same PHP version as 5.6.32 used in my hosting server.

I'll appreciate your help

t

I am having an issue where when I use the Always visible editing panel feature found here: https://datatables.net/blog/2017-06-30 with server side
//server

  Field::inst( 'applicationForm.branchID' )
              ->options( Options::inst()
              ->table( 'branches' )
              ->value( 'name' )
              ->label( 'name' ))
              ->validator( 'Validate::dbValues' )

//editor

 {
           label:'Branch',
            name:'applicationForm.branchID',
            type:'select'

 }

The interesting thing is that when I switch back to the standard modal method I see the data in the select list. If I make the select list static by passing an array of values to the option parameter in editor I also see the select. However that method will not suit my needs at this time. Is there a fix for this?

I've noticed that when I create a normal DataTable then the columns are stretched to fill the width of the container, but when I add Scroller then the columns have their natural width and I can adjust that with a class.

Here's an example of some tables both with and without the Scroller:
http://ghsfha.org/w/Special:SchoolHome?view=seasons&season=2016&school=Roswell

Compare the "2016 Roswell Hornets results" with the "All-State players".

I'd like to get the column widths the Scroller offers in a normal table unless I specify "width=100%".

Is it something I'm doing?

Hi, I want to create button in DataTables like the image bellow, how can I do that ?

Hi,

I changed the following example https://datatables.net/extensions/buttons/examples/initialisation/pageLength.html the array from

lengthMenu: [
                         [ 10, 25, 50, -1 ],
                         [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                 ],

into

lengthMenu: [
                         [ 15, 25, 50, -1 ],
                         [ '15 rows', '25 rows', '50 rows', 'Show all' ]
                 ],

but unfortunately the initial value is still 10 rows.

How can I change the intial value (it should be 15)?

Thanks in advance

Pib

Hi !

I have a datatable with an edit button placed in a row with a 'bt-modal' class.
When clicking it, it displays a bootstrap modal window.

I offer an update of the informations in the given TR in a bootstrap window (there's more informations to edit with complex validity controls). So far so good, this is server side, no problem for that.

Now, where I'm stucked, is when I try to update the informations of the row in the datatable after (or before, I can handle form control client-side) the modal is submitted.

In short (ok, I should maybe have started from here, sry) : How do I reference the datatable so that I can manipulate rows/cells data from my modal ?

Below my JS declarations/functions

$(document).ready( function() {
var forSearch = $('#Tmagasins').DataTable( {
        pageLength: 5,
        [other params like kanguage and so on]
}),
        // The modal call function
            $('.bt-modal').on( 'click', function () {
            tr = this.closest( "tr" );
            magid = forSearch.row(tr).id();
            trindex = forSearch.row(tr).index();
                         //this is just for testing and yes, it works
                                     /*trdata = forSearch.row(tr).data();
                         console.log(trdata);*/
                $('.modal-body').load('dsp_magasin.cfm?id='+magid+'&trindex='+trindex);
                    $('#modModal').modal({show:true});
        })
})

P.S : My HTML setup is pretty simple, as the datatable content is populated when page is loaded; let's pretend it's a basic/static HTML one.

Thanks + sorry for my weird English ... hope you'll get what I mean

I am a newbie to "jQuery DataTable Plugin" and I have also searched the forum to find a solution to my problem but no avail. Please forgive me if my question is redundant.

Basically, I have a web form that displays the search result using jQuery DataTable plugin. I want to be able to click on a (+) to expand the detail information for the selected row. To populate the data for the master table, I used code-behind to extract the data from the database. For the detail table, I used "web method" in the code-behind with 2 input parameters (primary key and environment). I made sure my web method indeed to the result from the database via unit-test. For the life of me, I cannot get the client (web browser) to display the data when I clicked on the ( + ) sign. I noticed that the responsJson.Message = Authentication failed. I attached my code so everyone can see what I am doing wrong.

These are the errors: SearchCustomer:1685
Uncaught TypeError: Cannot read property 'show' of undefined
* at HTMLTableCellElement.<anonymous> (SearchCustomer:1685)
* at HTMLTableSectionElement.dispatch (jquery-1.12.4.js:5226)
* at HTMLTableSectionElement.elemData.handle (jquery-1.12.4.js:4878)
* (anonymous)

POST http://localhost:1882/SearchCustomer.aspx/GetLoanHistory 401 (Unauthorized)
* send @ jquery-1.12.4.js:10254
* ajax @ jquery-1.12.4.js:9738
* format @ SearchCustomer:1632
* (anonymous)

Hi,
Is there any way to order the columns initially in the PHP server file? (using the PHP library)
I have found the order('col1,col2') function, however it seems I cannot use it within Editor::inst()->... calls.
This would help to order the columns by name instead of index.
Thanks and best regards

I just fell into a situation where the currently available set of values for type seems not enough to work as simply as it'd be possible.
Here is a pretty simple use case that illustrates the problem.

Having a column (say "allowed") containing a boolean value, which contains "0" or "1" (comes from a DB content).
Obviously it needs to be more friendly displayed so we'll do something like this:

var table = $('#example').dataTable({
  columnDefs: [{
    data: 'allowed',
    render: function (data, type, row, meta) {
      return data == '1' ? 'yes : 'no';
    }
  }]
});

Since we didn't do anything depending on type below, the user can type "yes" or "no" in the dedicated filter area to display only the allowed (respectively not-allowed) rows .

In the other hand, if for some reason the application must directly filter rows by itself, we can do for instance:

table.columns(<col index>).search('yes').draw;

So far so good.

Now if the application works in a multilingual context where a localize() function is available, the first scriptlet above becomes:

var table = $('#example').dataTable({
  columnDefs: [{
    data: 'allowed',
    render: function (data, type, row, meta) {
      return localize(data == '1' ? 'yes : 'no');
    }
  }]
});

Then user filtering keeps working fine, wether using "yes|no", "si|no", "oui|non", and so on.
But... now application filtering works only when the current language is English!

So one immediate obvious solution is to also change the second scriptlet accordingly:

table.columns(<col index>).search(localize('yes')).draw;

Sure then it works fine anew, but here is what I wanted to expose: isn'it too bad to have to use localize() again, while in this case a more immediate and elegant method would be to directly work with the original data value "0|1":

table.columns(<col index>).search('1').draw;

For this to work, it'd suffice to make render() work depending on its type argument.
But it's not currently possible: the "filter" type is the one used by DataTables both when responding to user-filtering and to column.search().
(BTW I guess that maybe user-filtering just uses column.search()...)

Here we retrieve what the doc says about the filter|search ambiguity.
So it'll be great if it could be uncoupled (may be by adding a new type value "search"?).

Thanks for your attention.

Hello!

I'm really not that fluent with JS and CSS so I am having a hard time finding out how I could achieve the look in the image below for my data table:

I basically want to divide the row into three columns with widths 4-8-4 to fit the page length, export buttons, and search bar.

I patterned my DataTable from this example. The only difference is that I removed the lengthChange: false in the javascript. I tried playing around with the dom options but I've got no luck on that.

I also found a solution for the same problem from stackoverflow but it uses bootstrap. I have no idea how I could modify it for semanticui.

Thanks!

I saw this recent article concerning integrating DataTables and Highcharts:
https://webdesign.tutsplus.com/tutorials/data-visualization-with-datatablesjs-and-highchartsjs--cms-29691

I wondered if I could add Leaflet to the mix as well and here's the result I got:
http://ghsfha.org/datatables_highcharts_leaflet.html

This page incorporates:
1) Datatables
2) Highcharts
3) Leaflet

Styling is Bootstrap 4.0.0 Beta 3 and Font Awesome 4.7.0 with some Animate thrown in there.

I've included Allan's experimental DataTables SearchPane and a modified Awesome Markers library to add Font Awesome icons to Leaflet.

I had never even heard of Highcharts before today and I have never used Leaflet before today, so while the page is working I'm certain the code could be improved.

My real question is whether anyone sees an opportunity to improve the code or to even make a package that would integrate these three packages tighter.

I can't help but to wonder if there's not a better way to cycle through the datatable and if what is passed along to Leaflet wouldn't be better as GeoJSON, but I'm not an expert in any of these.

Anyway, any thoughts are welcomed!

Loren

Good afternoon,
Just wondering if someone could point me in the right direction here. I've been looking through the forums and trying different things to no avail.
The issue I'm having is that I've got 6 tables on one page and some times when I load the page they all load fine, and other times one or more of the tables flags up an error that "DataTables warning: table id=manager - Ajax error. For more information about this error, please see http://datatables.net/tn/7".
In developer tools I'm getting "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".
It looks like the data is coming through but just not displaying.

I'm using laravel 5.4 with SQL database. Each table is displayed in a separate blade view and brought into the main layout as a nested view.

An example of one of my blade templates is as follows:

<div class="row">
    <div class="col-md-12">
        <table id="site_has_employee" class="display nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>View</th>
                    <th>Edit</th>
                    <th>Delete</th>
                    <th>Employee Number</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Company</th>
                    <th>Occupation</th>
                    <th>Date Inducted</th>
                    <th>Inducted By</th>
                    <th>FA</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<div id="sheModal" class="modal fade">
    <div class="modal-dialog modal-sm" role="document">
    <form method="post" id="she_form" enctype="multipart/form-data">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Employee Inducted</h4>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <label>Inductor</label>
                        <input type="text" name="inductor_id" id="inductor_id" class="form-control" required/>
                        <br />
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
                        <label>Date Inducted</label>
                        <input type="text" name="date_inducted" id="date_inducted" class="form-control" required/>
                        <br />
                    </div>
                </div>
                <br>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    {{--  <label>Employee Qualification ID</label>  --}}
                        <input type="hidden" name="id" id="id" />
                    {{--  <label>Employee ID</label>  --}}
                        <input type="hidden" name="employee_id" id="employee_id" />
                    {{--  <label>Qualification ID</label>  --}}
                        <input type="hidden" name="site_id" id="site_id" />
                        <input type="hidden" name="operation" id="operation" />
                        <input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    var oTableshe = $('#site_has_employee').DataTable({
        processing: true,
        serverSide: true,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        select: "multi",
        searching: true,
        info: true,
        //"scrollY": "500px",
        //"scrollX": true,
        //"scrollCollapse": true,
        paging: true,
        //responsive: true,
        ajax: "{{ route('sites-mgmt.shedatatable.getposts', ['id' => $site_id]) }}",
        dom:
        "<'row'<'col-sm-6'l><'col-sm-6'Bf>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        columns: [
            {data: 'employee_id', name: 'employee_id', orderable: false, render: function ( data, type, row, meta )
            {
                if(type === 'display')
                {
                    data = '<a href="/nstemployeedetail/' + data + '/"><button class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-eye-open"></span> View</button></a>';
                }
                return data;
            }},
            {data: 'id', name: 'id', orderable: false, render: function ( data, type, row)
            {
                return "<button type='button' class='btn btn-xs btn-info sheupdate' id='id' name='id' > Edit </button>";
            } },
            {data: 'id', name: 'id', orderable: false, render: function ( data, type, row)
            {
                return "<button type='button' class='btn btn-xs btn-danger shedelete' id='id' name='id' > Delete </button>";
            } },
            {data: 'employee_number', name: 'employee_number'},
            {data: 'firstname', name: 'firstname'},
            {data: 'lastname', name: 'lastname'},
            {data: 'company_name', name: 'company.name'},
            {data: 'occupation', name: 'occupation'},
            {data: 'date_inducted', name: 'date_inducted'},
            {data: 'inductor_id', name: 'inductor_id'},
            {data: 'fa', createdCell: function (td, cellData, rowData, row, col)
            {
                var now_date = new Date().getTime();
                var qual_date = Date.parse($(td).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
                var now_date_plus_two_mth = new Date((+new Date) + 5184000000);
                if(qual_date < now_date)
                {
                    $(td).append('<div class="led-red" id="led-red"></div>')
                }
                else if(qual_date > now_date && qual_date < now_date_plus_two_mth)
                {
                    $(td).append('<div class="led-yellow" id="led-yellow"></div>')
                }
                else if(qual_date > now_date_plus_two_mth)
                {
                    $(td).append('<div class="led-green" id="led-green"></div>')
                }
                else
                {
                    $(td).append('<div class="led-black" id="led-black"></div>')
                }

            } },
        ]
    });
});


</script>

Thanks in advance for any help or advice.

Kind regards

Stephen

Whenever I add the buttons all the datatables don't work and I have a string error...

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.2.1/dt-1.10.16/b-1.5.1/b-html5-1.5.1/datatables.min.css"/>

<

script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"</script>

<

script src="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"</script>

$(document).ready( function () {
var table = $('#ServerTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]

            "paging":   false,



    "columnDefs": [
                { targets: [0, 9], "orderable": false},
                {
                    type: 'natural',
        "searchable": true,
        "orderable": true,
        "targets": 1



    } ],
    "order": [[ 1, 'asc' ]]
} );

hi,

I want upate my datable using an input

i have an input with button
```html
<input id="itexte" type="text"></input>
<br>
<input id="soumission" type="button" value="le bouton"></input>
<div class="container">

```

my datatable contain :

```js
data: function ( d ) {
d.city = $('#itexte').val();
}

```

i try :

$( "#soumission" ).click(function() {

    table.ajax.reload();

});

but it's doesn't works

Hello everyone,

I tried to combine the upload many example (https://editor.datatables.net/examples/advanced/upload-many.html) with child table example (https://datatables.net/blog/2016-03-25) to upload files only for the child entries, but I always get the error message "A server error occurred while uploading the file".

I guess the error occurs due the php server script.

I set up an extra SQL-Table like this (with one manually created entry):

CREATE TABLE `files` (
  `id` int(8) NOT NULL auto_increment,
  `user_id` varchar(128) NOT NULL,
  `file_id` varchar(128) NOT NULL,
  `filename` varchar(128) NOT NULL,
  `filesize` varchar(128) NOT NULL,
  `web_path` varchar(256) NOT NULL,
  `system_path` varchar(256) NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `files` (`id`, `user_id`, `file_id`, `filename`, `filesize`, `web_path`, `system_path`) VALUES
(1, '58', '1', 'tset.pdf', '4232424', 'http://127.0.0.1/upload/', '/upload/');

Do I need a second "users_files" table? I don't understand this part in the upload example:

   Mjoin::inst( 'files' )
        ->link( 'users.id', 'users_files.user_id' )
        ->link( 'files.id', 'users_files.file_id' )

Can anyone explain this part to me?

I already changed a lot, so it would be hard to review my whole code, but if anyone interested in it than I can publish it.

Thanks in advance

pib

In testing, this

    oTable.buttons(0, null).container().insertAfter("table");       // example only
    oTable.buttons(1, null).container().insertAfter("h1");           // example only

seems to provide what I'm going to need. The point being that I could then display "sets" of buttons in bordered containers pre-defined in my HTML. This would significantly improve readability where several buttons are in play.
However, I would have expected to use something like this

var my_CRUD_buttons = new $.fn.dataTable.Buttons(oTable, {
....
var my_export_buttons = new $.fn.dataTable.Buttons(oTable, {
....

i.e. named instances rather than the numeric ones in the first example.
Is my first example the correct way to do this?

Hi,

What happened to .form-control in editor 1.7? My select form controls are not styled like they are used to.

Kind regards,
Dennis

I believe i solved the problem with printing with row grouping. I found a snippet of code on StackOverflow here and was able to fix it up to work with row grouping. This is placed in datatable-buttons.js on line 1564.

Heres some images of it working!
http://prntscr.com/fhx1vu
http://prntscr.com/fhx1ia

    var _exportData = function ( dt, inOpts )
    {

        var config = $.extend( true, {}, {
            rows:           null,
            columns:        '',
            grouped_array_index: [],
            modifier:       {
                search: 'applied',
                order:  'applied'
            },
            orthogonal:     'display',
            stripHtml:      true,
            stripNewlines:  true,
            decodeEntities: true,
            trim:           true,
            format:         {
                header: function ( d ) {
                    return strip( d );
                },
                footer: function ( d ) {
                    return strip( d );
                },
                body: function ( d ) {
                    return strip( d );
                }
            }

        }, inOpts );

        var strip = function ( str ) {
            if ( typeof str !== 'string' ) {
                return str;
            }

            // Always remove script tags
            str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );

            if ( config.stripHtml ) {
                str = str.replace( /<[^>]*>/g, '' );
            }

            if ( config.trim ) {
                str = str.replace( /^\s+|\s+$/g, '' );
            }

            if ( config.stripNewlines ) {
                str = str.replace( /\n/g, ' ' );
            }

            if ( config.decodeEntities ) {
                _exportTextarea.innerHTML = str;
                str = _exportTextarea.value;
            }

            return str;
        };


        var header = dt.columns( config.columns ).indexes().map( function (idx) {
            var el = dt.column( idx ).header();
            return config.format.header( el.innerHTML, idx, el );
        } ).toArray();

        var footer = dt.table().footer() ?
            dt.columns( config.columns ).indexes().map( function (idx) {
                var el = dt.column( idx ).footer();
                return config.format.footer( el ? el.innerHTML : '', idx, el );
            } ).toArray() :
            null;

        var rowIndexes = dt.rows( config.rows, config.modifier ).indexes().toArray();
        var selectedCells = dt.cells( rowIndexes, config.columns );
        var cells = selectedCells
            .render( config.orthogonal )
            .toArray();
        var cellNodes = selectedCells
            .nodes()
            .toArray();

        var grouped_array_index     = config.grouped_array_index;                     //customised
        var no_of_columns           = header.length;
        var no_of_rows              = no_of_columns > 0 ? cells.length / no_of_columns : 0;
        var body                    = new Array( no_of_rows );
        var body_data               = new Array( no_of_rows );                                //customised
        var body_with_nodes         = new Array( no_of_rows );                          //customised
        var body_with_nodes_static  = new Array( no_of_rows );                          //customised
        var cellCounter             = 0;

        for (var i = 0, ien = no_of_rows; i < ien; i++)
        {
            var rows            = new Array( no_of_columns );
            var rows_with_nodes = new Array( no_of_columns );

            for ( var j=0 ; j<no_of_columns ; j++ )
            {
                rows[j]             = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
                rows_with_nodes[j]  = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
                cellCounter++;
            }

            body[i]                     = rows;
            body_data[i]                = rows;
            body_with_nodes[i]          = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
            body_with_nodes_static[i]   = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
        }

        /******************************************** GROUP DATA *****************************************************/
        var row_array                       = dt.rows().nodes();
        var row_data_array                  = dt.rows().data();
        var iColspan                        = no_of_columns;
        var sLastGroup                      = "";
        var inner_html                      = '',
            grouped_index;
        var individual_group_array          = [],
            sub_group_array                 = [],
            total_group_array               = [];
        var no_of_splices                   = 0;  //to keep track of no of element insertion into the array as index changes after splicing one element

        for (var i = 0, row_length = body_with_nodes.length; i < row_length; i++)
        {
            sub_group_array[i]              = [];
            individual_group_array[i]       = [];

            var sGroup                      = '';

            for(var k = 0; k < grouped_array_index.length; k++)
            {
                sGroup                          = row_data_array[i][grouped_array_index[k]];
                inner_html                      = row_data_array[i][grouped_array_index[k]];
                grouped_index                   = k;
                individual_group_array[i][k]    = row_data_array[i][grouped_array_index[k]];
                sub_group_array[i][k]           = sGroup;
            }

            total_group_array[i] = sGroup;


            console.log("grouped_index",grouped_index);

            if ( sGroup !== sLastGroup )
            {
                var table_data              = [];
                var table_data_with_node    = '';

                for(var $column_index = 0;$column_index < iColspan;$column_index++)
                {
                    if($column_index === 0)
                    {
                        table_data_with_node        += '<td style="border-left:none;border-right:none">'+inner_html+'</td>';
                        table_data[$column_index]   = inner_html + " ";
                    }
                    else
                    {
                        table_data_with_node        += '<td style="border-left:none;border-right:none"></td>';
                        table_data[$column_index]   = '';
                    }
                }

                body_with_nodes.splice(i + no_of_splices, 0, $.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
                body_data.splice(i + no_of_splices, 0, table_data);
                no_of_splices++;
                sLastGroup = sGroup;
            }
        }

        return {
            header: header,
            footer: footer,
            body:   body_data
        };
    };

Usage:
Define grouped_array_index in exportOptions

 exportOptions: {
        // Any other settings used
        grouped_array_index: [<place row to use here>],
 },