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

construct Datatable ajax response programmatically

October 25, 2017, 5:06 pm
$
0
0

I'm attempting to recreate the following in PHP dynamically:
Editor::inst( $db, 'user_to_groups')
->field(
Field::inst( 'user_to_groups.user' ),
Field::inst( 'user_to_groups.group' )
->options( Options::inst()
->table('groups')
->value('ID')
->label('groupname')
)
->validator( 'Validate::dbValues' ),
Field::inst( 'groups.groupname' )
)
->where('user',25)
->leftJoin( 'groups', 'groups.id', '=', 'user_to_groups.group' )
->process($_POST)
->json();

So far, my attempt has yielded:
$editor = new Editor( $db, $tablename, $tablekey );
$editor->fields(new Field("user_to_groups.user"));
$editor->fields(new Field("user_to_groups.group"));
$editor->fields(Field("user_to_groups.group"))->options( 'groups','ID','groupname' );
$editor->fields(Field("user_to_groups.group"))->validator( 'Validate::dbValues' );
$editor->fields(new Field("groups.groupname"));
$editor->where('user','25');
$editor->leftJoin( 'groups', 'groups.id', '=', 'user_to_groups.group' );
$editor->process( $_POST ) ->json();

I think the first 3 lines are correct. Can you please provide guidance on correct syntax for setting options, validator, and joins?

↧
Search

Responsive Expand / Collapse only when icon is clicked (exclude other content in cell)

October 25, 2017, 10:30 pm
$
0
0

I understand that the solution to this is to have the expand / collapse icon in it's own column, however, for the app I am working on I would like the icon to be in the first column along with the cell content, which in this case is a checkbox.

https://snag.gy/mYgpBH.jpg

With the expand / collapse icon in the first column when the checkbox is checked / unchecked it triggers the expand / collapse of the DataTables row. Is there a way to only trigger the expand / collapse by the icon only (ie excluding all other cell content)?

↧
↧

Data tables sorting , pagination and column searching are not working fully

October 25, 2017, 10:37 pm
$
0
0

I made a server-side processing data table.
I have 3000 entries in my datatable
It was working fine before a week but now I am not able to sort some columns in descending order, search some column, and pagination after 17th page.
My sorting query is:
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // adding length
My column search query is:
if( !empty($requestData['columns'][i]['search']['value']) ){ //name $sql.=" AND id LIKE '%".$requestData['columns'][i]['search']['value']."%' "; }

And my data table jquery is:
$(document).ready(function() { var dataTable = $('#example').DataTable( { dom: "Bfrtip", scrollY: "75vh", "scrollX": true, "iDisplayLength": 25, "order": [[ 14, "desc" ]], ajax: { url: "server_processing.php", type: "post" }, serverSide: true, select: true, buttons:['pageLength','copy', 'csv', 'excel', { extend: 'print', exportOptions: { columns: ':visible' } }, { text: 'Update', className: 'edit', enabled: false, action: function (e, dt, node, config) { var modal = document.getElementById('updateModal'); modal.style.display = "block"; } }, { text: 'Delete', className: 'delete', enabled: false, action: function (e, dt, node, config) { var delmodal = document.getElementById('deleteModal'); delmodal.style.display = "block"; } }, 'colvis' ], columnDefs: [{ "targets": [ 0 ], "visible": false, "searchable": false }], });
I am constantly getting an error- DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Kindly help me out,

Facing this issue since 2 weeks and can't figure out what is the problem.

↧

I want to reload datatable but only the last record

October 25, 2017, 11:04 pm
$
0
0

// index.php

<!DOCTYPE html>
<html>
<title>Datatable</title>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var table = $('#lic_grid').DataTable( {

                "processing": true,
                "serverSide": true,
                "ajax":{
                    url :"grid-data.php", // json datasource
                    type: "post",  // method  , by default get
                    retrieve:true,

                }

            } );
table.ajax.reload();
        } );

    </script>

    <style>
        div.container {
            margin: 0 auto;
            max-width:760px;
        }
        div.header {
            margin: 100px auto;
            line-height:30px;
            max-width:760px;
        }
        body {
            background: #f7f7f7;
            color: #333;
            font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
        }
    </style>
</head>
<body>
    <div class="header"><h1>Dog details </h1></div>
    <div class="container">
        <table id="lic_grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Sr.No.</th>
  <th>APPLICANT NAME</th>
 <th>DOG NAME</th>
 <th>GENDER</th>


                    </tr>
                </thead>
        </table>
    </div>
</body>

</html>

// grid-data.php

<?php //error_reporting(E_ALL); //ini_set('display_errors', 1); include("dbcon.php"); $requestData= $_REQUEST; $query=mysqli_query($con,"select * from lic_register ORDER BY app_id DESC"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; $totalFiltered = mysqli_num_rows($query); $i=1; while($fetch= mysqli_fetch_array($query)) { $result['data'][]=$fetch; } $json_data = array( "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $result['data'] ); echo json_encode($json_data); ?>
↧

Rowgroup with detail

October 25, 2017, 12:34 am
$
0
0

Hello,

I'm using the extension rowgroup to group some rows.

But I would like to hide the rows and just show one row and have a button "detail" to display the rows.

For example, in my datatable I want to hide the rows that don't have the ribbon. And when you click on the ribbon for example, you display the rows of this group.

Do you think it's possible ?

Thank you !

↧
↧

How do I use $_SESSION['userId'] to filter the rows that the loggen in user can view / edit?

October 26, 2017, 2:01 am
$
0
0

I am new to Datatables and have spent a couple of days trying to find the solution without making any head way. So please forgive me if this is a newbie question.
I have made the table without any issues but when I try to restrict the logged in users acces to the full table data I run into problems.

In the WHERE clause (line 57) I can manually enter the user Id (in this case 94) and the rows are showing as required. However, when I replace 94 with $_SESSION['userId'] - (->where( 'vendors.id', $_SESSION['vendor'] )) I get the "DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1" error message.

The $_SESSION has been called at the top of the page and an echo test does display the logged in user Id correctly.

Clearly I am making a very basic error but can't see a way forward....
Thanks
Ian

<?php
// DataTables PHP library
include( "../../php/DataTables.php" );


// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;




/*
 * Example PHP implementation used for the join.html example
 */
Editor::inst( $db, 'vendors' )
    ->field(

    Field::inst( 'vendors.id' ),

            Field::inst( 'events.venue_id' )
            ->options( Options::inst()
                ->table( 'venues' )
                ->value( 'id' )
                ->label( 'name' )
            )
            ->validator( 'Validate::dbValues' ),
        Field::inst( 'venues.name' ),


        Field::inst( 'events.qual_id' )
            ->options( Options::inst()
                ->table( 'qualifications' )
                ->value( 'id' )
                ->label( 'name' )
            )
            ->validator( 'Validate::dbValues' ),
        Field::inst( 'qualifications.name' ),

        Field::inst( 'events.date' ),
        Field::inst( 'events.end_date' ),
        Field::inst( 'events.currency' ),
        Field::inst( 'events.vat_status' ),
        Field::inst( 'events.price' ),
        Field::inst( 'events.disabled' )


    )


    ->where( 'vendors.id', 94 )
    ->leftJoin( 'events', 'events.vendor_id', '=', 'vendors.id')
    ->leftJoin( 'venues', 'venues.id', '=', 'events.venue_id' )
    ->leftJoin( 'qualifications', 'qualifications.id', '=', 'events.qual_id' )



//


    ->process($_POST)
    ->json();
↧

Load data but hide some lines if some column contains something

October 18, 2017, 1:39 pm
$
0
0

Hello,

I load data using ajax and it works perfectly. But immediately when the table is loaded, I would like to display only lines which the column named "nom" does not begin by "STH".

I managed to create a checkbox which hide or show those lines when the user clicks on the checkbox :

$('input[name="mycheckbox"]').on('ifChanged', function(event){
        if ($(this).prop('checked')) {
            table2.column("nom:name").search("", true).draw();
        }
        else {
            table2.column("nom:name").search("^(?!STH)").draw();
        }
    });

but the lines where "nom" column begins by "STH" are shown when the datatable is drawn for the first time. I don't want this : I would like to hide them by default.

So I tried to do this :

$('#table2').on('xhr.dt', function ( e, settings, json, xhr ) {
                new $.fn.dataTable.Api( settings ).one( 'draw', function () {
                    $('input[name="mycheckbox"]').iCheck('uncheck');
                    //$('input[name="mycheckbox"]').trigger('ifChanged');
                } );
            } );

but the 'ifChanged' event is not fired after data loaded and the lines beginning by "STH" are displayed on the table after loading.
If I uncomment the line with "trigger('ifChanged')", the 'ifChanged' event is fired but the table is empty after loading. I have to check and uncheck 'mycheckbox' to have what I want...

Is there a solution ??

Many thanks in advance for your help...

T.

↧

How can i customize pagination

October 26, 2017, 2:09 am
$
0
0

How to customize pagination like Previous, current page number,next , last

Now it is displaying all page numbers

Can any one please help me on that

↧
Search

How to use responsive in Angular 4 ?

October 26, 2017, 4:10 am
$
0
0

I'm using data-tables in angular 4. But I'm not able use the responsive options associate with the data tables in** Angular 4.**.
Could show me a demo that how to use responsive in angular 4 ? It's very urgent. Please reply me as soon as possible....

↧
↧

How to add image in report button pdf?

October 26, 2017, 4:46 am
$
0
0

How to add an image in the report that is generated by the pdf button?

↧

I am not able to understand what is developer license means?

October 26, 2017, 5:04 am
$
0
0

Can we use these files to deploy on clients server where our applications hosted?

↧

how to create watermark in all my print pages?

October 26, 2017, 5:13 am
$
0
0

** Using this code watermark display in first page only....
**

customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend(
'<img src="<?php echo base_url(); ?>assets/img/Logo.png" style="position:absolute; top:400; left:300; bottom:
1500; opacity:0.2;" />'
);

                $(win.document.body).find( 'table' )
                    .addClass( 'compact' )
                    .css( 'font-size', 'inherit' );
            },
↧

add a button to clear search field

October 20, 2017, 5:21 am
$
0
0

Is there a way to add a button next to the search filed that would clear the search field when clicked?

↧
↧

processing message with font awsome spinner

October 26, 2017, 6:16 am
$
0
0

I managed to get the processing message to appear but was wondering how do you remove its border and center it in the table rather then having it near the top?

↧

Trying To Use datatables.net-editor-server For Node.js

October 5, 2017, 12:25 pm
$
0
0

Is this package ready for developers to work with? (Rough around the edges would be OK.)
What version of Node.js do I need to be running?
Do I need to compile the Typescript in my environment, or should the javascript files that came with the package work?
Am I instantiating the Editior correctly?
Is there a complete example available anywhere?

———— My Application Calling the Editor————————————————————

var mysql = require('mysql');
var dataTablesEditor = require('datatables.net-editor-server');
//First Attempt To Use The Node-Editor Module From GitHub

module.exports = {
    invokeEditor: function (req, res) {
        console.log("InvokeEditor: Start");
        var con = mysql.createConnection({
            host: "localhost",
            port: “XXXX",
            user: “XXXXXXX",
            password: “XXXXXXXXX",
            database : "dtab_demo"
        });
      var editorInst = dataTablesEditor.Editor(con, "dtab_demo", "id”);
      console.log(editorInst);
    }
}

——————— What I Get In The Node.Js Console —————————————————————

InvokeEditor: Start
TypeError: _this.db is not a function
    at Object.Editor (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/datatables.net-editor-server/dist/editor.js:121:19)
    at Object.module.exports.invokeEditor (/Sonario/Data Loading/Data Tables/dataTableNode/demo_db_connection_05.js:22:43)
    at /Sonario/Data Loading/Data Tables/dataTableNode/app.js:32:23
    at Layer.handle [as handle_request] (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/layer.js:95:5)
    at next (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/layer.js:95:5)
    at /Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/index.js:335:12)
    at next (/Sonario/Data Loading/Data Tables/dataTableNode/node_modules/express/lib/router/index.js:275:10)
↧
Search

Build dynamic tables from system script

October 26, 2017, 6:37 am
$
0
0

Greetings all,

I manage a number of servers for our company and would like to use the DataTables tool to display a list of currently running processes on these servers. I am a very new web programmer/hacker and am just learning to use javascript, jQuery, etc. Mostly, I learn by example.

I have read the example documentation but don't see how to run an external script call to collect the data. In particular, I want to run an external script to collect data in comma-separated output then use the DataTables tool to display the resulting data.

Can someone please point me to a snippet/example code I can work with?

Thank you in advance!

↧

How to update a cell without refreshing the row?

October 26, 2017, 7:02 am
$
0
0

Hello, I have a DataTable with a refresh timer which is in charge do get a JSON and update some cells in my table.

I'm using a drawCallback to get the visible rows:

drawCallback: function (
   let api = this.api();
   currentRows = api.rows({page: 'current'});
   startSync();
}

My method startSync has an ajax to request the new JSON and after complete de load, it calls my refreshRows method:

function refreshRows (data) {
   currentRows.every(function () {
      let i = 0, found = false;
      while(i < data.length && !found) {
         if(this.data().importId === data[i].importId) 
            found = true;
         else
            i++;
      }
      this.data(data[i]);
   });
}

My problem is that its refreshing the whole row when I add the information to the data.
I have a checkbox selected for example and after this refresh, since the whole row is updated, the checkbox become unchecked.

What can I do to just update a cell which was modified??

↧
↧

serverside processing doesn't load with microsoft edge

August 17, 2017, 9:15 am
$
0
0

I am currently working on a project using MVC5 and datatables.js. I've configured data tables to fetch the data using serverside processing via a POST call to my web api. Everything is working great in IE11, Firefox, Chrome, etc. However, when viewing using Microsoft Edge I get a blank table; no data is returned. Using the network tab in the browser I can see that the AJAX call to my web API is never called. Anyone have any ideas? :smile:

my clientside code:

$("#reviewTable").DataTable({ "processing": true,
"serverSide": true, "info": true,
"stateSave": true, "sPaginationType": "full_numbers",
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], "ajax": {
"url": "@Url.Action("GetReviews","api/Reviews")", "type": "POST"
}, "columns": [
{ "data": "ReviewName", "orderable": true }, { "data": "Description", "orderable": true },
{ "data": "Type", "orderable": true }, { "data": "CreatedDate", "orderable": true }
], "order": [[0, "asc"]],
"createdRow": function (row, data, dataIndex) { $(row).attr("data-review-id", data.ID);
} });

↧

Josmar2017

October 26, 2017, 7:22 am
↧

Data-table Column Fixed When fetching data using server side

October 26, 2017, 8:20 am
$
0
0

I an using data table with bootstrap . When i am fetching data using Server side method Its being responsive but column is still fixed width and for that reason scroll bar being visible under the table.

my code html:

<div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card-box table-responsive">

                        <h4 class="header-title m-t-0 m-b-30">All Medicine </h4>

                        <table id="datatable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Price</th>
                                    <th>Expire date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div><!-- end col -->
</div>
<!-- end row -->

JS code

<script>

    $(document).ready(function() {
    $('#datatable').dataTable(
        {
        "responsive": true,
        "language": {
          "emptyTable": "<h2 style='text-align:center;color:#ff5b5b;'>No online users found!!!</h2>",
          "zeroRecords":    "<h2 style='text-align:center;color:#ff5b5b;'>No matching records found</h2>"

            },

            "bProcessing": true,
             "sAjaxSource": "class/medicine_record.php",
              "bPaginate":true,
              "sPaginationType":"full_numbers",
              "iDisplayLength": 10,
             "aoColumns": [
                { mData: 'medicine' },
                { mData: 'medicine_form' },
                { mData: 'medicine_price' },
                { mData: 'medicine_expire_date' },
                { mData: 'link' },
        ]
        }
    );
} );

</script>

Image:

↧
Viewing all 82245 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>