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

How to style dataTable checkboxes

0
0

Hi All,

I've been played with the checkbox styling inside of dataTable but with no much success.

Have anyone changed the style, like size and some other effect for the checkboxes inside of the dataTables?
Centralize vertically and horizontally?

For example: I would like to add this style for my checkboxes, but, I'm not sure of the limitations and possibilities when customizing that

Style sample: https://codepen.io/CreativeJuiz/pen/BiHzp

Thank you very much in advance!

Regards,
Alex


How can i make search work with content of details section?

How to apply advanced search on datatable using input text and select?

0
0

Hi, I tried many of different way to apply advanced search on table using Datatable with all of input text and dropdown select but not working with me this is example of my code could anyone help me with my problem and this I want When I fill all the search filed than click on filter button show data in table.

http://live.datatables.net/piqidoqo/636/edit

Use Field value in file upload directory

0
0

I would like to use a field value 'licence.Reg' as a variable in the upload directory: ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads'.**Field::inst( 'licence.Reg' )**. '/__ID__.__EXTN__' )

or assign 'licence.Reg' as a $variable.

Editor::inst( $db, 'licence' )
    ->fields(
        Field::inst( 'licence.Appendix' ),
        Field::inst( 'licence.Reg' ),
        Field::inst( 'licence.Section_Heading' ),
        Field::inst( 'licence.Criteria' ),
        Field::inst( 'licence.Score' )
            ->options( Options::inst()
                ->table( 'score' )
                ->value( 'id' )
                ->label( 'name' )
            ),
        Field::inst( 'score.name' ),
        Field::inst( 'licence.Comments' ),
        Field::inst( 'licence.Reference' )
    )
    ->join(
        Mjoin::inst( 'files' )
            ->link( 'licence.id', 'audit_files.audit_id' )
            ->link( 'files.id', 'audit_files.file_id' )
            ->fields(
                Field::inst( 'id')
                 ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads'.**Field::inst( 'licence.Reg' )**. '/__ID__.__EXTN__' )
                        ->db( 'files', 'id', array(
                            'filename'    => Upload::DB_FILE_NAME,
                            'filesize'    => Upload::DB_FILE_SIZE,
                            'web_path'    => Upload::DB_WEB_PATH,
                            'system_path' => Upload::DB_SYSTEM_PATH
                        ) )
                        ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                        ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif', 'pdf' ), "Please upload an image" ) )
                    )
            )
    )
    ->leftJoin( 'score', 'score.id', '=', 'licence.score' )
    ->process( $_POST )
    ->json(); 

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Stale data on draw()

0
0

I have a datatable which gets its rows data from an AJAX call. One of the columns contains a cell which needs a further AJAX call which returns an HTML string which should be replace the cell's current content. The code look as follows:

$nextAjaxCell.replaceWith(content)
$table.cell($cell).invalidate("dom")
$table.cell($cell).invalidate()
$table.cell($cell).invalidate("data")
loadAjaxHasBeenCalled = false
exports.loadNextAjaxCell($parent)

But if I then call draw $(e).DataTable().columns.adjust().draw("page") the cells with the second AJAX call will be reset back to the data received from the first AJAX call.

I tried to use $table.cell($cell).data(content) instead of $nextAjaxCell.replaceWith(content), but to no avail.

How can I invalidate/change the underlying data so the data from second AJAX call persists after draw().

Search and sort simultaneously

0
0

I need to search and sort the result in chronological order by date.I had gone through some solution but did not work for me.

Reload/refresh table after event

0
0

I am trying to reload the table but I can't seem to find the way to call the reload function.
In the .done function of the 'revoke' event is where I'm trying to call it $(document).on("click", '.revoke', function (event).
Here is how I'm calling it but fails: $('#example').data.reload(); or table.reload(); or table.ajax.reload();
Any ideas?

<script>
    $(document).ready(function () {
       var thedata = GetPermissions();

        var table = $('#example').DataTable({
            data: jQuery.parseJSON(thedata),
            columns: [
                { data: 'Professional' },
                { data: 'Patient' },
                {
                    data: "View",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Edit",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Insert",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Delete",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Revoke",
                    render: function (data, type, row) {                     
                            return '<input type="button" class="btn btn-danger btn-xs revoke" data-pro="' + row.ProfessionalID + '" data-pat="' + row.PatientID + '" name="revoke" value="Revoke">';
                     }
                }
            ]
        });

        $(document).on("click", '.revoke', function (event) {
            var sf = $.ServicesFramework(<%=ModuleId %>);
                var serviceUrl = sf.getServiceRoot('omnibody');
                var revoke = { 'ProfessionalID': $(this).data('pro'), 'PatientID': $(this).data('pat') };

                $.ajax({
                    type: "POST",
                    cache: false,
                    url: serviceUrl + "/ModuleTask/RevokeAccessRights",
                    beforeSend: sf.setModuleHeaders,
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(revoke)
                }).done(function (result) {
//PROBLEM IS HERE
                    // $('#example').data.reload();
                    table.reload();
                }).fail(function (xhr, result, status) {
                    alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
                });
            });
    });
    
    function GetPermissions() {
        var sf = $.ServicesFramework(<%=ModuleId %>);
        var serviceUrl = sf.getServiceRoot('omnibody');
        var jdata;
        $.ajax({
            type: "GET",
            cache: false,
            async: false,
            url: serviceUrl + "/ModuleTask/GetAccessRightsPivoted",
            beforeSend: sf.setModuleHeaders,
            contentType: "application/json; charset=utf-8"
        }).done(function (result) {
            jdata = result;
            return jdata;
        }).fail(function (xhr, result, status) {
            alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
        });
        return jdata;
    }
</script>

issue when Api responsive.recalc() jquery load indeterminate numbers of responsives tables

0
0

I have a very strange issue, i'm able to use the great datatable plugin in many places.
But when i load the tables trought Jquery.load() ajax function the responsive characteristic do not work correctly until manualy change the size of the window.

I make a research and I can not make it work responsive.recalc() and columns.adjust().

This is my load function that bring me the tables when change an select input :

```

$('#idPresupuesto').change(function(event) {
    $('.table1').load('actions/manyTablesLoads.php?id='+$('#id').val(), function () {
        var table = $('table.display').DataTable({responsive: true}).responsive.recalc();
        $.fn.dataTable.tables( { visible: true, api: true } ).columns.adjust();

        $('#preloader').fadeOut('slow');
  });

```
What i make it wrong?
Best Regards!


Example of Multi Select Datatable Within a Form, passing selected values to Servlet on Submit

0
0

Hi,

I have a working multi-select datatable. How can I use it in a form with a submit button, calling a java servlet with the data values from a particular column (say col 0). Do I have to get into jQuery and maintain an array of selections or should be an API call to get the data for submit. Can some one show a simple example?

Datatable row count incorrect after server-side delete operations

0
0

Hio
When i delete a record in my application via server-side PHP PDO/MySQL datatables incorrectly reports the number of records remaining. So instead of the row count decremented by one up to 3-4 pages @ 10 entries per page) are now being reported as removed!!! When i check the backend Database that performed the deletion it correctly shows that one record was deleted and indeed it is gone. Is this a known issue or do i need to refresh the datatable? if so how? Ohter than reinstall a new copy of the backend database i've yet to find a way to make all the missing rows appear again. After 2-3 test deletions all records are gone - from 156 records to zero having performed 3 or 4 single row deletions - HELP!

Small bug on Fixed Column Bootstrap 4 when adding table-sm

0
0

When I initialize my fixedColumns on datatables with the following options:

 DataTable(
        {
          scrollX: true,
          scrollCollapse: true,
          fixedColumns: true
        }

Everything works, but when I add table-sm to my table:

<table class="table table-sm table-bordered nowrap" >

the bootstrap order arrow shows up within the cell. I tested this with multiple records, and this only occurs on the first record only.

Add id parameter to select rows in the datatable

0
0

Hi,
I have a first page that show events and a corresponding id. When i click on an event, i go to another page and i get the id of the selected event. Here is have a second table to display only the people who subscribed to this event.
My problem is that i don't know how to give this id as a parameter of my second table, my table displays people for all my events.

This is how i link my first page to the second one ( with columnDefs parameter)

"render" : function(data,type,row){
            var inputid = row[0];
            var inputname = row[1];
            return '<a href="source.php?id='+inputid+'" >'+inputname+'</a>'

Here is my code for my second table

var table = $('#example').DataTable( {
      "colReorder": true,
      "order": [[0, 'asc']],
      "processing": true,
      "serverSide": true,
      "pageLength": 10,
      "ajax": "source2.php",
      "select": {style:'single'},
      "dom": 'lBfrtip',
      "columnDefs": [
        {
          "render" : function(data,type,row){
            var inputid = row[0];
            return '<a href="#add'+ inputid +'" data-toggle="modal"><button type="button" class="btn btn-success btn-sm">Modifier</span></button></a>'
          },
          "targets" : 4
        }
      ],
      language: { search: "" }
  });

And the interesting php/htlm code

$id = $_GET['id'];
//echo "<div id = 'getIdEvent'>".$id."</div>";
  ?>
<table id="example" class="display table-bordered " style="width:100%">
         <thead>
             <tr>
                  <th>Nom</th>
                  <th>Prenom</th>
                  <th>Mail</th>
                  <th>idEvent</th>
                  <th>Modifier</th>
             </tr>

         </thead>
         <tfoot>
             <tr>
               <th>Nom</th>
               <th>Prenom</th>
               <th>Mail</th>
               <th>idEvent</th>
               <th>Modifier</th>
            </tr>
         </tfoot>

 </table>

This is my result and for example I would like to have only the rows where idEvent = 1

I 'm a beginer with ajax :/. Thanks for your help in advance !

Cannot get FixedHeader work with Angular 6 + Bootstrap

0
0

I am trying to use datatables.net-fixedheader-bs4 with Angular 6. Here is my code :

var dataTable = $('inbox-table').DataTable({
bAutoWidth: true
});
new $.fn.dataTable.FixedHeader( dataTable );

I am getting the error:
core.js:1673 ERROR TypeError: Cannot read property 'oFeatures' of undefined
at new FixedHeader (dataTables.fixedHeader.js:88)

Not sure what I am missing. I just want to use the Fixed header feature.

Is there an ability to keep the scroll position after Editing in the pop up modal?

0
0

I have implemented DataTables Editor and integrated it with the Select extension. If a user selects a row at the bottom of a result set, clicks the edit button, and submits the changes, DataTables reloads the data and returns the scrolling back to the top. I was able to use Scroller for inline editing to keep scroll position but not with the Edit modal. Is there a way to keep position of the scroll after editing in the pop up modal?

Call initComplete on table.ajax.reload()

0
0

Due to special layout on my webpage I need to get the "recordsTotal" value in a function when I do a table.ajax.reload()
When I do my initial datatable init I have an initCompletefunction where I can get the value in "settings._iRecordsTotal"

But initComplete is not called on ajax.reload. Is there any way to pass the "settings._iRecordsTotal" value when you do a ajax.reload?

I have tried to do a callback function but can 't get i to work: this.$datatable.DataTable().ajax.reload( function(){ this.totalHitsRender(); alert('COME ON') });
If I could only call my totalHItsRender() function like that....


Rename uploaded file before moving to final location?

0
0

Is it possible to rename a file based on an editor input field before uploading it? I was thinking of using the custom upload action like below.

I want to upload a file (with any name) and rename it using another field from the editor before it is stored in its final location.

Field::inst( 'transtest.SerialNo' )
        ->validator( Validate::notEmpty( ValidateOptions::inst()
            ->message( 'A serial number is required' ) ) ),
Field::inst( 'images.name' )
        ->upload(
                Upload::inst( function ( $file, $id ) {

                    $SystemPath = '\\\\SHARES\\IMAGES\\GIS\\Pictures\\';
                    $WebPath = 'http://appsserv/app/power/pictures/';
                    $extension = '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
                        
                    -->
                    $NewName = (the transtest.SerialNo from above);
                    -->

                    move_uploaded_file( $file['tmp_name'], $SystemPath.$NewName.$extension);
                        return $id
                } )
        ->db( 'images', 'name', array(
                'images.name'  => Upload::DB_FILE_NAME,
                'images.size'  => Upload::DB_FILE_SIZE,
        ) )
        ->validator( Validate::fileSize( 5000000, 'Files must be smaller that 5 MB' ) )
        ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
)
->leftJoin( 'images', 'transtest.image', '=', 'images.name' )

Is there a way to access the transtest.SerialNo field in order to rename the uploaded file using it?

I attempted this route:

https://datatables.net/forums/discussion/44969/editor-upload-file-exists-confirm-overwrite-prompt

the solution all the way at the bottom...but I couldnt get the writeCreate or writeEdit to fire. I verified the custom upload was writing to the db but they would not fire.

Sharepoint Online using cdn datatables - How to fix cannot perform Deep Copy() error.

0
0

Hi everyone,

I am using cdn datatables and I am receiving an error. The error message says

"Uncaught Error: Cannot perform DeepCopy() because a circular reference was encountered, object: [object Object], property: 0"

The process is I am getting the data in a sharepoint online through json.

Any reply would be so much appreciated.
Thanks

-caloy

Facing the issue in edit fields is not updating?

0
0

Hi ,

we are using fixed columns in my application. So,we are using key-table for inline editing, while edit the field,unable to updating,so i checked fixed columns example in data table also,but its not working,so can you please replicate the issue.
I'm attaching the link. Please take a look and give us some suggestions for updating the value while editing.

https://editor.datatables.net/examples/inline-editing/fixedcolumns.html

pageLength parameter not working as expected

0
0

I have these parameters:

        "info":     false,
        "scrollY":        "200px",
        "scrollCollapse": true,
        "paging":         false,
        "pageLength": 30,
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],

So I expect 30 rows to display; however, only five rows are displayed.

Draw and Length Params Not Being Sent in Server Side Processing

0
0

I was initially having difficulty getting my table to refresh with new data form new parameters using ajax.reload(). The problem appeared to be that it was using the same parameters that I had set during initialization, and the fix was to make the ajax data parameter a function.

After doing this, I see that the updated parameters are being passed in the ajax call, however my query on the back-end is failing because draw and length are no longer being passed. According to the server side manual (https://datatables.net/manual/server-side), these are two params that DataTables itself will send out. However, it looks like that is not the case when data is made a function.

Will I have to manually set up the start,m length, and draw options, and then keep track of them, or is there something I am missing here?

Original code segment:

    var table = $('#example').DataTable({
        cache: false,
        scrollCollapse: false,
        paging: true,
        pagingType: 'simple_numbers',
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
        searching: false,
        info: false,
        processing: true,
        serverSide: true,
        ajax: {
            url: myURL,
            data: {
                campus: $("#campus").val(), 
                                college: $("#college").val(),  
                                year: $("#year").val() };
            }
        }
    });

Updated code segment:

    var table = $('#example').DataTable({
        cache: false,
        scrollCollapse: false,
        paging: true,
        pagingType: 'simple_numbers',
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
        searching: false,
        info: false,
        processing: true,
        serverSide: true,
        ajax: {
            url: myURL,
            data: function () {
                return {campus: $("#campus").val(), college: $("#college").val(), year: $("#year").val() };
            }
        }
    });
Viewing all 79328 articles
Browse latest View live




Latest Images