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

How to populate the row.child using ".net" datatable as datasource?

$
0
0

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)


Does Mark.js highlight search terms in Server-Side Processing (SSP) tables?

$
0
0

The search term highlighting feature demonstrated in this blog post looks really nice but I want to know if it works on server-side processing tables before I spend time implementing it.

Yadcf date_range filter

$
0
0

Hi,
I am using date range filter i want to add validation of that FROM DATE cannot be greater than TO DATE , how can i do that please help

Demand Data Tables in Qlikview : Give users more Freedom

$
0
0

In this article we will learn how to give more freedom to business users, by allowing them to create their own data tables from predefined list of expressions and dimensions. Let’s start!

Our task in this example is to provide dashboard to HR where both dimensions and expressions can be defined by the user. We will do this by providing list of fields, which can be used as dimensions and list of formulas which will be used as expressions. In addition – we will then allow them to change data representation and add a way to save their creations for future usage. We will also add some predefined templates for most used scenarios.

First we will need some data. I’ve generated mine on http://www.generatedata.com/ and saved it into Excel:

Let’s load this data now and add one calculated dimension [Hire Year]:

Employees: LOAD *, Year([Hire Date]) as [Hire Year] ; LOAD ID, [First name], [Last Name], Phone, Email, Country, City, Department, Date#([Hire Date],'DD/MM/YYYY') as [Hire Date], [Personal Number], Gender FROM [Employees.xlsx] (ooxml, embedded labels, table is Worksheet);

Next we will need the list of Expressions and Dimensions, for HR to choose from:

`Dimensions:
LOAD * INLINE [
Dimensions
ID
First name
Last Name
Phone
Email
Country
City
Department
Hire Date
Personal Number
Gender
];

Expressions:
LOAD * INLINE [
Expressions
Headcount
Joiners YTD
];`

So we’ve got some employee data, list of expressions and dimensions. We can now make use of those and add them to report in Qlikview:

Let’s add “Straight Table” chart with all employee dimensions and two expressions:

  1. #hc– to calculate headcount:

=count(ID)

  1. #jty – for joiners in current year

=count({$<[Hire Year]={$(=Year(today(1)))}>}ID)

Final object will look like below:

Fine, but we wanted our users to create their own chart, only based on our dataset. Do not worry – we are getting there!

We will make use of “Dimensions” and “Expressions” List Boxes, combined with “Conditional” tick-box in Straight Table chart.

Idea here is to only show columns, which are matching selections in “Dimensions” List Box and use expressions chosen by user from “Expressions” List Box.

Let’s start with making #hc expression to activate on demand. Go to Chart Properties -> Expressions -> Select #hc expression -> Tick Conditional box -> Paste below code into field under the box:

GetSelectedCount(Expressions)>=1 AND concat(Expressions,',') like 'Headcount'
You should have something like this:

What does this do? Simply makes sure that expression is selected in “Expressions” List Box and that “Headcount” is one of those expressions.

We must follow same road for all dimensions as well. For example, ID will use below Statement for Enable Conditional:

GetSelectedCount(Dimensions)>=1 AND concat(Dimensions,',') like 'ID'

I hope this helps you!

Regards
Sarahjohn

How to integrate DataTables with JsBarcode

$
0
0

Hi, I have some products data in datatable which have generated barcode by jsbarcode. I'm using modal form to add new product. After modal hide, other data draw successfully, but not the barcode. The barcode requires page refresh to draw. How to draw the barcode without refreshing page?

Also I put export to excel and print button, but the barcodes are not loaded. How to make it appear when I export and print the table?

problem edit

$
0
0

good, we are doing tests with the editor to see if it is good for our company and we have a problem when editing, to create it works well but when editing in the mvc part the action is not coming to edit but the data reaches 0, could you tell us what the problem is?

    var editor;

    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            table: "#datatable",
            ajax: {
                create: {
                    type: 'POST',
                    url: 'http://localhost:55218/task/config/add',
                },
                edit: {
                    type: 'POST',
                    url: 'http://localhost:55218/task/config/edit',
                },
                delete: {
                    type: 'POST',
                    url: 'http://localhost:55218/task/config/delete',
                }
            },
            idSrc: 'codconfig',
            fields: [
                {
                    label: "codconfig:",
                    name: "codconfig"
                },
                {
                    label: "Key:",
                    name: "key"
                },
                {
                    label: "Value:",
                    name: "value"
                }]
        });

        $('#datatable').DataTable({
            dom: "Bfrtip",
            ajax: {
                url: "http://localhost:55218/task/config/list",
                type: "GET"
            },
            serverSide: true,
            columns: [
                { data: "codconfig" },
                { data: "key" },
                { data: "value" },
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
    });

Export to excel with customize size column

$
0
0

Hi, i have some trouble and i trying to searching but not give me a solution
Is possible to set width column in datatables ?
Please tell me if anyone know about this.

Datatable not showing properly in modal box

$
0
0

Hi
I am trying to show a datatable in a modal box, which opens when user clicks a button.
Although the datatable is loading properly but its overflowing outside the modal box.

What I want to do is,
display data table in modal box properly (I am okay if it hides some of the columns and adds a (+) to expand the view ..
same as responsive mobile/tab view.

You can see the problem here

URL : http://gadhiya.in/dispatch
UNAME: kaustubh.agrawal2012@gmail.com
PWD : 12345678

After login > Click transactions > click Dispatch > Click (New) > click (Select Sauda) button on the editor form

I have checked a few things out as below, but without any success
https://datatables.net/examples/api/tabs_and_scrolling.html
https://datatables.net/forums/discussion/41870/column-width-not-working
https://stackoverflow.com/questions/25215750/datatables-does-not-becomes-responsive-on-bootstrap3-modal-dialog

Please help me with this.
Thanks.


Different fields for "create" and "edit"?

$
0
0

It's possible define different fields for "create" and "edit" buttons?

Buttons don't appear and I got string error

$
0
0

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' ]]
} );

Buttons stuck on loading when I click on them... any reason why?

$
0
0

When I click the button "Excel" for example, there are 2 arrows spinning like it's loading.
Although, it's stuck.. I tried a few times but nothing..
Any ideA?

$(document).ready( function () {
var table = $('#ServerTable').DataTable( {
"dom": 'B<"top"fi>rt',

            buttons: [
                'copy', 'excel'
            ],

            "paging":   false,



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




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

How can i Filter multiple column data Using jquery DataTable ?

The search option and pagination is not appearing when I use more than 6 rows.

$
0
0

The search option and pagination is not appearing when I use more than 6 rows on the table. I am currently using https://startbootstrap.com/template-overviews/sb-admin/, it is using datatables.net and it currently has 6 rows on the table templates that it has, I have checked the jquery data and bootstrap data but can't seem to find the culprit. Hope you can help me make this table capable of using more that 6 rows thanks!

Problem with with span and columnDefs

$
0
0

Hi,
i need help with sorting and a mouseover tooltip

i use <td id="grungruppe"> <div class="tooltip">1050 <span class="tooltiptext"> TEST</span> </div> </td>
to create a Number with mouseover tooltip. But datatable can now not use it as a number, still manual override with html-num or num did not work

$(document).ready(function() {
            $('#example').DataTable({
                paging: false,
                bFilter: false
                ,
                "columnDefs": [
                    { "type": "html-num", "targets": 19 }
                  ]
            });

         } );

How could i solve this ?

Force use of datepicker?

$
0
0

Is there a way to force the user to use the datepicker? ie - disallow typing in the input box?


Expand/Collapse all rows by clicking on button

$
0
0

How would I implement the functionality that will allow me to collapse and expand all rows in a datatable with just the click of a button?

table.$ is not a function

$
0
0

I've searched for an answer for this, and all seem to say I'm loading JQuery after datatables. But I does not appear to me that I am:

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
        <meta name="csrf-param" content="authenticity_token"/>
        <meta name="csrf-token" content="CLy00qe7NM2zf5WRS2rt9cHINK24hMxgF63iozP0Y6Ltq2lyoNGA/+yTLElUnfICxY75CYhELXPmQT3DrkE0PQ=="/>
        <link rel="stylesheet" media="all" href="/assets/application.self-93b7ddd36456e9d99ecb884cad16015d77893552567350c8bee7d29ae7bd5b75.css?body=1"/>
        <script src="/assets/rails-ujs.self-817d9a8cb641f7125060cb18fefada3f35339170767c4e003105f92d4c204e39.js?body=1"></script>
        <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
        <script src="/assets/popper.self-b5d0395dd499f58f910fee32e5221f71c3b8e6f3229879a7b76d481c5446de10.js?body=1"></script>
        <script src="/assets/bootstrap/util.self-f2db8d2e646a4c0196dc185380722e53e26bdcb1dc0b696759563ed9641abc0d.js?body=1"></script>
        <script src="/assets/bootstrap/alert.self-3c0e0ea912c51e8e7cdd46645658114f49c4245972067c7f07b9a66d30980b7c.js?body=1"></script>
        <script src="/assets/bootstrap/button.self-b08385816b4677d7b197afc248181b5c1ccd97e8574f13fd18b2ec7503781692.js?body=1"></script>
        <script src="/assets/bootstrap/carousel.self-814d08a1d0e798e67888247c116f8b6af05ea60c1486545812e830e8e8c136b0.js?body=1"></script>
        <script src="/assets/bootstrap/collapse.self-1a79cba43ee7c30dece65724e64137b954b83b28c4d591c00734bf0b419c6d2d.js?body=1"></script>
        <script src="/assets/bootstrap/dropdown.self-581cb0e8000124c7d3f24330cafa3ef23563cb526cd45e62d8c9cf7fc91fe935.js?body=1"></script>
        <script src="/assets/bootstrap/modal.self-22d10c752d4dcc6815e1da5de44172f41902a6f92f1ea940bf1f232c051af5ba.js?body=1"></script>
        <script src="/assets/bootstrap/tooltip.self-af0600d0aa69db3dc757c30fda2eb61b4189dc04238446c4f13f98e73658fa94.js?body=1"></script>
        <script src="/assets/bootstrap/popover.self-c65dad71efe46a28e4a392027b4d4ac1c545db26552ffc82556bd520fd49a9ab.js?body=1"></script>
        <script src="/assets/bootstrap/scrollspy.self-da52adbf5cee52bbef5ca164a9fa5da71bf73c6a92c980ad1ab67f61c082e3fe.js?body=1"></script>
        <script src="/assets/bootstrap/tab.self-b6e67455db9465b475d6431cd0dd220f594ac034bcedb3e146a0b9dd5b094d2a.js?body=1"></script>
        <script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1"></script>
        <script src="/assets/badges.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
        <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
        <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
        <script src="/assets/datatables/jquery.dataTables.self-09a1cac04cf9882e653cf3df15b46bed5a3c238a839c9d6040e30a14144af1f5.js?body=1"></script>
        <script src="/assets/datatables/extensions/Select/dataTables.select.self-862eade47f647d6c4a51c90184450d132cbed38241e6edcc9b818b36a21a2529.js?body=1"></script>
        <script src="/assets/datatables/dataTables.bootstrap4.self-7694572f5a6396d39c0384e4f1b6accaabd3c89647a4a8a27374583eed1498e0.js?body=1"></script>
        <script src="/assets/datatables.self-177170bbf2634ab084c931a35b84b719808fdea3cf4684b32cecfa027b7c895b.js?body=1"></script>
        <script src="/assets/standards.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
        <script src="/assets/students.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
        <script src="/assets/application.self-8b65b3952adab793be02406cf8176888fd765a95fbb34c17bdff04d92ec24968.js?body=1"></script>
    </head>
    <body>
...

I get the error when I hit the submit button, and try to reference the table var I saved during init:

$(document).ready(function(){
  var table = $('#standards_form_table').DataTable({
    stateSave: true,
    select: true,
    "pageLength": 15,
    "lengthMenu": [ [10, 15, 25, 50, -1], [10, 15, 25, 50, "All"] ],
    "order": [[ 0, "asc" ], [1, "asc"], [2, "asc"]],
    "columnDefs": [
      { "targets": [3,4], "orderable": false}
    ]
  });

  $('#btn-submit').on('click', function(e){
     e.preventDefault();

     $.ajax({
        url: '/badges/1',
        data: table.$('input[type="checkbox"]').serialize()
     }).done(function(data){
        console.log('Response', data);
     });
  });
});

Date formatting using inline editing with date picker.

$
0
0

I trying to figure out how handle date formats using DataTable Editor, with inline datepicker.

I am using a SSP script to retrieve and update my database.

The field I need is stored in the DB as YYYMMDD format (text).

So I need to achieve the following...

  1. Convert the date from YYYYMMDD to mm/dd/yyyy for the front-end DataTable .
  2. When user changes date using datepicker inline, I need to update the back-end database with the YYYMMDD format.

This would also apply to the DataTable Editor form field as well.

SSP

<?php
// DataTables PHP library
require( $_SERVER['DOCUMENT_ROOT']."/DataTables_Editor/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;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'NWxxxx.PAYxxxx', 'HREMxx')
->debug(true)
    ->fields(
        Field::inst('HRLxx'),
        Field::inst('HRLOxx'
         Field::inst('HRNOxx'),
        Field::inst('HRNAMxx'),
        Field::inst('HREFDTxx')       // SALARY EFFECTIVE DATE - Formatted YYYMMDD
)
    ->process( $_POST )
    ->json();

JS


<script type="text/javascript" src="/js/jquery-current.min.js"></script> <script type="text/javascript" src="/jquery-ui-1.12.0/jquery-ui.min.js"></script> <script type="text/javascript" src="/js/jquery.dataTables.min.js"></script> <!-- <script type="text/javascript" src="/js/dataTables.fixedHeader.min.js"></script> --> <script type="text/javascript" src="/js/dataTables.fixedColumns.min.js"></script> <script type="text/javascript" src="/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="/js/dataTables.select.min.js"></script> <script type="text/javascript" src="/DataTables_Editor/js/dataTables.editor.min.js"></script> <script type="text/javascript" src="/js/dataTables.rowGroup.min.js"></script> <script type="text/javascript" src="/DataTables_Editor/js/editor.display.js"></script> <script type="text/javascript"> var editor; //global for the submit and return data rendering var table; // global for the data table //**************************************************************************** //** $(document).ready(function() //**************************************************************************** $(document).ready(function() { editor = new $.fn.dataTable.Editor( { ajax: "ssp_script.php", table: "#approvalTable", fields: [ {label: "Employee Name", name: "HRNAMxx", type: "display", }, {label: "Employee Number", name: "HRNOxx", }, {label: "Effective Date", name: "HREFDTxx", // SALARY EFFECTIVE DATE - Formatted mm/dd/yyyy }, ] } ); // Activate an inline edit on click of a table cell $('#approvalTable').on( 'click', 'tbody td:not(:first-child):not(\'.live\')', function (e) { editor.inline( this, { onBlur: 'submit' } ); } ); table = $('#approvalTable').DataTable( { lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], }, scrollX: true, dom: "Bfrtip", ajax: "ssp_HourlySalaryIncreaseApproval.php", type: 'POST', order: [[2, 'asc']], columns: [ { data: null, defaultContent: '', className: 'select-checkbox', orderable: false }, { data: "HRLxx"}, { data: "HRLOxx"}, { data: "HRNOxx" }, { data: "HRNAMxx" }, { data: "HREFDTxx" }, // SALARY EFFECTIVE DATE - Formatted mm/dd/yyyy ], select: { style: 'os', selector: 'td:first-child' }, buttons: [ // { extend: "create", editor: editor }, { extend: "edit", editor: editor }, // { extend: "remove", editor: editor } ] } ); });//END $(document).ready(function() </script>

Unneccessary hiding of a column

$
0
0

I have a table which conveniently fits on a 1092pixel-screen, yet when I enable the Responsive-Option, the last column unneccessarily goes into child-mode. Do I need to set any options to prevent that behaviour?

Responsive table here, debug: ewaxul, unreponsive counterpart.

Table is rendered using

$(function(){$("#sample").DataTable(
  {
   "columns":[{},{"className":"dt-right"},{"className":"dt-right"},{"className":"dt-right"},{"className":"dt-right"}],
   "mark":true,
   "responsive":false
  });
});

The column.render callback runs too many times

$
0
0

While doing some refactoring of code to improve performance, I noticed an issue with column.render option.

When a function is defined to the column.render option, during table initialization the function is called way too many times for the display type. It runs more than once for each column and even when the deferRender: true is enabled, it runs at least once for each cell.

Take the following example:

$('#example').DataTable( {
  data: ExampleData,
  deferRender: true,
  columns: [
      { data: "name" },
      { data: "position" },
      { data: "office" },
      { data: "extn" },
      { data: "start_date", render: function (data, type, row, meta){
        if( type === "display" ){
            console.log("column " + meta.col);
        }
        if( type === "sort" ) return data.timestamp;

        return data.display;
      } },
      { data: "salary" }
  ]
} );

I would expect the console.log output to only get called 10 times on initialization (since the deferRender: true) option is on. However, it actually runs 68 times.

If I disable the deferRender option, it runs 114 times.

Here's a live example:
https://jsfiddle.net/dswitzer/539q35p8/1/

Why is this running so much? Shouldn't it only call the "display" type when actually rendering?

Viewing all 81688 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>