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

paging controls not showing on loading

$
0
0

Hello,
I have a DataTable where, after initial loading, the paging controls are not visible.
It's not until I do some kind of action, like sorting or changing the numbers per page, that they suddenly appear.

Any idea what can be the reason for this strange behaviour?

Thank you.


Datatable PDF row grouping

$
0
0

Hi I can group datatable rows in verilog. But how can i do this when I import pdf export output? I have been searching but could not find a solution.
I need to group PDF Export lines

Can you help me?

File upload not working with two Editors on same page

$
0
0

One of the tables used in my application has a large number of fields, including two fields used to hold references to file uploads (one an image the other a pdf). Because the number of fields is large, I'm using multiple tabs to segregate the data into reasonable size chunks. Each tab has its own editor to handle the data within that tab. Works well, but I've run into an issue when uploading image and pdf files.

One of the editors ends up referencing the incorrect set of files when attempting to open the editor. I've created a fairly easily replication of the problem starting with the Editor sample upload.html/php. To reproduce, do the following:

Add another column to the users table as pdf int default NULL, and recreate the sample database.

Copy upload.html to uploadTest.html and modify contents as follows:

<snip><snip><snip>

var editor1; // use a global for the submit and return data rendering in the examples
var editor2; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor1 = new $.fn.dataTable.Editor( {
        ajax: "../../controllers/uploadTestImage.php",
        table: "#editor1",
        fields: [ {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Image:",
                name: "image",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+editor1.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
        ]
    } );

    var table = $('#editor1').DataTable( {
        dom: "Bfrtip",
        ajax: "../../controllers/uploadTestImage.php",
        columns: [
            { data: "last_name" },
            {
                data: "image",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor1.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor1 },
            { extend: "edit",   editor: editor1 },
            { extend: "remove", editor: editor1 }
        ]
    } );

    editor2 = new $.fn.dataTable.Editor( {
        ajax: "../../controllers/uploadTestPDF.php",
        table: "#editor2",
        fields: [ {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "PDF:",
            name: "pdf",
            type: "upload",
            display: function ( file_id ) {
                return '<img src="'+editor2.file( 'files', file_id ).web_path+'"/>';
            },
            clearText: "Clear",
            noImageText: 'No image'
        }
        ]
    } );

    var table = $('#editor2').DataTable( {
        dom: "Bfrtip",
        ajax: "../../controllers/uploadTestPDF.php",
        columns: [
            { data: "last_name" },
            {
                data: "pdf",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor2.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No PDF",
                title: "PDF"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor2 },
            { extend: "edit",   editor: editor2 },
            { extend: "remove", editor: editor2 }
        ]
    } );

} );



    </script>
</head>
<body class="dt-example php">
    <div class="container">
        <section>
            <h1>Editor example <span>File upload</span></h1>
            <div class="info">
                <p>This example shows Editor being used with the <a href="//editor.datatables.net/reference/field/upload"><code class="field" title=
                "Editor field type">upload</code></a> fields type to give end users the ability to upload a file in the form. The <a href=
                "//editor.datatables.net/reference/field/upload"><code class="field" title="Editor field type">upload</code></a> field type allows just a single file to be
                uploaded, while its companion input type <a href="//editor.datatables.net/reference/field/uploadMany"><code class="field" title=
                "Editor field type">uploadMany</code></a> provides the ability to have multiple files uploaded for a single field.</p>
                <p>The upload options of Editor are extensively documented in the manual (<a href="//editor.datatables.net/manual/upload">Javascript</a>, <a href=
                "//editor.datatables.net/manual/php/upload">PHP</a>, <a href="//editor.datatables.net/manual/net/upload">.NET</a> and <a href=
                "//editor.datatables.net/manual/node/upload">NodeJS</a>) and details the various options available.</p>
                <p>In this example an image file can be uploaded, limited to 500KB using server-side validation. To display the image a simple <code class="tag" title=
                "HTML tag">img</code> tag is used, with information about the file to be displayed retrieved using the <a href=
                "//editor.datatables.net/reference/api/file()"><code class="api" title="Editor API method">file()</code></a> method which Editor makes available and is
                automatically populated based on the server-side configuration.</p>
            </div>
            <div class="demo-html"></div>
            <table id="editor1" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Last name</th>
                        <th>Image</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Last name</th>
                        <th>Image</th>
                    </tr>
                </tfoot>
            </table>
            <table id="editor2" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Last name</th>
                    <th>PDF</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th>PDF</th>
                    <th>Image</th>
                </tr>
                </tfoot>
            </table>
            <ul class="tabs">
                <li class="active">Javascript</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>Ajax</li>
                <li>Server-side script</li>
            </ul>
            <div class="tabs">

<snip><snip><snip>

Then, copy upload.php to uploadTestImage.php and change as follows:

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../lib/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,
    DataTables\Editor\ValidateOptions;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'last_name' ),
        Field::inst( 'image' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__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' ), "Please upload an image" ) )
            )
    )
    ->process( $_POST )
    ->json();

Similarly, copy upload.php to uploadTestPDF.php and changes a follows:

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../lib/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,
    DataTables\Editor\ValidateOptions;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'last_name' ),
        Field::inst( 'pdf' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__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( 'pdf' ), "Please upload a PDF file" ) )
            )
    )
    ->process( $_POST )
    ->json();

Now you're ready to test. Load the uploadTest.html and you should see two tables, each with two columns. First table has Last Name and Image columns, second table has Last Name and PDF columns. All good to this point.

Next, select first record in first table, then Edit first table, and upload any image. This is good.

Then, select second record in second table, then Edit second table, and upload any PDF. This works too.

Next, refresh the page. Image and PDF are there. That's good.

Now select the first record in first table, and then Edit first table. Doesn't work. Edit button just shows spinning cursor. I poked around down into DataTables.editor.min.js:105 -- and wrong array of files seems to be there (array from second editor, not first one).

If you refresh the page, select the second record in the second table, and then Edit, everything works okay.

Somewhere along the way, the list of files used for each editor is getting out of synch.

Note, I am using DataTables 1.10.18 and Editor 1.8.1 for both my own application, and for the example that I reproduced above.

Also, I did make the change you outlined in this fix from this issue to editor.php, but the problem still exists for me.

get data from child row

$
0
0

hello every one! please help me. in thi s situation, i have table with full data (from api) and some rows has nested table(thats eddition info). I am using DataTable. but it is not working with nested table ? and how can I get data nested child?

* 
* <table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%">
*       <thead>
*         <tr>
*          ............
*         </tr>
*       </thead>
*      
*         <tbody>
*           <tr>
*             <td>Tiger Nixon</td>
*             <td>System Architect</td>
*             <td>Edinburgh</td>
*             <td>61</td>
*             <td>2011/04/25</td>
*             <td><table>
*                   .............
*                  </table>
*             </td>
*           </tr>
*           .........
*           .........
*            <td>Tiger Nixon</td>
*             <td>System Architect</td>
*             <td>Edinburgh</td>
*             <td>61</td>
*             <td>2011/04/25</td>
*             <td>2123123</td>
*          </tbody>
* </table>
* 
*  <script type="text/javascript">
*         $(document).ready(function() {
*   $('#example').DataTable({
* 
* 
* 
* });
* });
*       </script>
* 

draw() on invisible rows

$
0
0

I am currently working on the integration of DataTables with Pusher and everything so far works great with one exception: at the moment I am updating the rows using:

table.row(rowElement).data(date).draw (false);

however, draw() only refreshes the visible rows. How can I refresh other rows that are invisible at the moment, e.g. are on another page?
Here is my initializer:

var table = $('#example').DataTable( {
    "ordering": false,
    "bLengthChange": false,
    deferRender: false,
    pageLength: 10,
    ajax: '{{ absolute_url(path('posts')) }}',
    columns: [
        {
            data: 'name',
            name: 'name'
        },
        {
            data: 'content',
            name: 'content'
        },
        {
            data: 'isActive',
            name: 'isActive'
        },
        {
            data: 'isReaded',
            name: 'isReaded'
        },
        {
            data: null,
            className: 'change-status',
            defaultContent: '<button>XXXX</button>'
        }
    ],
    createdRow: function (row, data, dataIndex) {
        rowClass($(row), data);
    }
});

colReorder compatibility issue other functions

$
0
0

Hi,
I'm trying to implement the colReorder function along with order and colVis functions.

Problem is that if I move a column, the indexes returned from order or colvis functions is the original one and not the actual one.

For example, consider a table with 3 columns (id 0, 1 and 2), column 0 contains internal data so it's hidden by default and not considered in the colVis columns, I order column 2 and then switch it with column 1:
- before moving column, table.settings().order() returns [ 2, "asc" ]
- after column has been moved i expect to receive [ 1, "asc" ], but I get [ 0, "asc" ]

So, if I save table.settings().order()'s result to the database and then use it back on next table initialization, everything is messed up. I've menaged to solve this replacing the returned index with table.colReorder.transpose(idx) in a for cycle, but is this really the way to go?

With colVis is even worst and I don't even know how to work around it. In the same scenario as above, if I select from the dropdown menù the column number 2, it remains visible, column 0 becomes visible between column 2 and 1, column 1 remains visible.
I've set up a demo for you: https://jsfiddle.net/0yc8sd1z/. Please, switch the 2 columns and then try to hide the column "Office".

Integration of deeplink.js into existing table

$
0
0

Hey Guys,
i have a little problem with the integration of the deepLink plugin into my existing table.

This is my original table

$(document).ready(function() {
   var dataTable = $('#mytable').DataTable( {
      "iDisplayLength": 30,
      "pagingType": "full",
      "ajax": "Database.txt",
   } );
} );

Now my table looks like this.

$(document).ready( function () {
   $('#mytable').DataTable( $.fn.dataTable.ext.deepLink( [
      'search.search'
       ] ) 
   );
});

So where do i have to place my settings, for example.

"iDisplayLength": 30,    or
"pagingType": "full",    or
"ajax": "Database.txt",

Does anyone know that ?
I know its a dumb question but i don't get it.
Thx Samu

ExcelHtml5 Export customize - get background color cell

$
0
0

Good morning, in excel export customize for example I can get the value of the specific cell with the function:

$('is t', this).text();

Is it possible to get the value of the background colour (define with html tag in <td>) of a specific cell?

Thank you if you can help me

Tito


datatable With Large amount of Columns

$
0
0

I am using datatable js for a Table which has 175 column and only 20rows, it is very Slow when applying data table.
i am using inlineedit also , Can any one help me to speed up the data table

Datatable editor posting to db

$
0
0

Hello all!

I have the editor extension to my datatable. When a cell is changed I want the value to be sent to a service --> controller --> repository and then be updated via an SP.

Columns in db are, Dog, Cat, Fish, Cow.

JS:

 $(document).ready(function () {
                editor = new $.fn.dataTable.Editor( {
                    ajax: {
                        url: "Services/FileName.svc/SaveNewAnimals ",
                        contentType: 'text/javascript; charset=utf-8',
                        dataType: 'json',
                        data: function(d){
                        
                           return JSON.stringify(d.data);
                       },
                    },

d.data will no contain the value that has been changed in the table. For example lets say we change a 1 --> 2.
d.data will look like this: 17058: {Cow: "2"} - if you change a cell in the cow column. Also the number 17058 I have no idea what that is.

Service (c#):

 public propertyClass SaveNewAnimals (arg) 
        {

            var response = new AnimalPropertys
            {
                Cow = arg.Cow
            };
            Controller.AnimalMethodInController(response);
            return response;
        }

The problem is the **argument **in the service. When I POST from js --> service and send the data 17058: {Cow: "2"} I dont know how to retrieve it with an argument. Shall I create a property class for the send POST and map the values with the properties. Or can I simply send a int from the POST?

What is the best way to retrieve the POST data in a method? Which datatype can I put as and argument to retrieve the data being send from POST.

Br,

Anton

How do I styling 'Showing entries' and 'Pagination'?

$
0
0

I would like to put more margin around both 'Showing 1 to x entries' and 'Pagination.
How do I change the style using CSS?

NB: I already edited both 'Search' input (using .dataTables_filter) and 'Show x entries' (using .dataTables_length).

Thank you in advance.

Open child rows on top of parent row

Deleting did not working in Node server side

$
0
0

I downloaded editor samples, and in controller json.js, I write two routes, they all used join tables.

Here is the first one, it works fine on new, editing and deleting.

// using `public` schema
router.all('/api/join', async function(req, res) {
    let editor = new Editor(db, 'users')
        .debug(true)
        .fields(
            new Field('users.first_name'),
            new Field('users.last_name'),
            new Field('users.phone'),
            new Field('users.site').options(
                new Options().table('sites as sites1').value('id').label('name')
            ),
            new Field('sites.name')
        )
        .leftJoin('sites as sites', 'sites.id', '=', 'users.site');

    let e2 = await editor.process(req.body);

    res.json(editor.data());
});

And this one only works on new and editing.On deleting side, it seems the SQL not called.

// using `sandbox1` schema
router.all('/api/join2', async function(req, res) {

    let editor = new Editor(db, 'sandbox1.users as users')
        .fields(
            new Field('users.first_name'),
            new Field('users.last_name'),
            new Field('users.phone'),
            new Field('users.site')
                .options(
                    new Options().table('sandbox1.sites as sites1').value('id').label('name')
                ),
            new Field('sites.name')
        )
        .leftJoin('sandbox1.sites as sites', 'sites.id', '=', 'users.site')

    await editor.process(req.body);
    res.json(editor.data());
});

I use datatables.net-editor-server 1.8.1.

And I am sure the font-end send the right data to back-end.

Any suggestion for me?

parent child datatables

$
0
0

Hi,

Its been a while, I am back again. trying to get parent and child datables on click of parent row.

here is my code

`<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables -  Parent and Child</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
            <tr>

                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>

        <tfoot>
            <tr>

                 <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </tfoot>

        <tbody>
          <tr>

            <td>1</td>
            <td>xxx</td>
            <td>uyy</td>
            <td>dddd</td>
          </tr>
          <tr>

            <td>2</td>
            <td>dfff</td>
            <td>ddd</td>
            <td>dddd</td>
          </tr>
        </tbody>
      </table>
    </div>

<div>
      <table id="child" class="LogDetails"> 
        <thead>
            <tr>

                <th>Id</th>
                <th>Loged Date</th>
                <th>Loged Out Time</th>

            </tr>
        </thead>


      </table>
    </div>

  </body>
</html>`

my javascript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "columns": [
            {   "orderable":      true,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "A" },
            { "data": "B" },
            { "data": "C" },
            { "data": "D" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    editMember(data[0]);
} );

} );

Anyone around to help, so i can use ssp class to retrieve data from my sql database please?

OR

Just from the text file the child data?_

Column Widths not playing ball in Modal - unless resize window

$
0
0

Hi Everyone.

I have a modal with a datatable, which I'm using to update bulk analysis information. The Modal and Table are shown below:

   <div class="modal fade" id="ASBresultsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h2>Asbestos Results</h2>
            </div>        
            <div class="modal-body">   
               <div class="Table_Container" >
                  <h2>Enter ASB Results</h2> 
                  <br>  
                  <table id="example" class="display" cellspacing="0" style="width:100%">
                     <thead>
                        <tr>
                           <th>Room Location</th>
                           <th >Area, Item, Material</th>
                           <th >Sample No</th>
                           <th>Identification</th>
                           <th>Rec. Actions</th>
                           <th>MAS</th>
                           <th>PAS</th>
                           <th>Total</th>
                           
                        </tr>
                     </thead>
                  </table>
               </div>
            </div><!--End Modal-Body-->
            <div class="modal-footer">
            Hello
            </div>
         </div> <!-- ENd Model Content -->                     
      </div><!--End Modal-Dialogue-->
   </div> <!-- End of modal fade bs-modal-sm -->

I've setup the data, class and width parts using the following - which works apart from with Width:

         var table = $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "../server_side/scripts/ET_ASBresultsForBuilding.php?buildingID=27291",
            iDisplayLength: 25,
            columns: [
               { data: "tblASBassets.roomLocation", className: 'editable', width:"20%"},
               { data: null, render: function ( data, type, row ) {
                      return data.tblASBassets.area + ', ' +data.tblASBassets.item + ', ' + data.tblASBassets.material;
                  } },
               { data: null, render: function ( data, type, row ) {
                      // Combine the first and last names into a single table field
                      return data.tblASBassets.approach + ' ' +data.tblASBassets.sampleNo;
                  } },
               { data: "tblASBassets.asbestosFound", className: 'editable', width:"20%" } ,
               { data: "tblASBassets.recommendedAction", className: 'editable', width:"20%" },
               { data: "tblASBassets.MAscore", width:"5%" },
               { data: "tblASBassets.PAscore", width:"5%" },
               { data: "tblASBassets.totalScore", width:"5%" } 

            ],          
            order: [ 1, 'asc' ],
            keys: {
               columns: ':not(:first-child)',
               keys: [ 9 ]
            },
            select: {
               style:    'os',
               selector: 'td:first-child'
            },
            buttons: [

            ]
         } );

I have a button on the screen to display the modal - which runs the following function to display it and try and redraw:

      function  showASBresultsModal() {
         $('#ASBresultsModal').modal('toggle') ;  
         var table = $('#example').DataTable();
         $('#container').css( 'display', 'block' );
         table.columns.adjust().draw();           
      }

When the modal opens the screen looks like:

when I resize the window the table sorts itself out:

I assume this is because it's on a modal... but not 100% sure.... has anyone got any ideas on what I can try to cure this?

Thanks in advance for any help given


How to show network error in DATATABLE Ajax Call

$
0
0

Hi Everyone,

My server side script works fine, however when the server or network is down, i would like to show error message.

I am aware in my javascript, there is an issue with date field, where it not converting empty values, convert empty column to something meaningful but now it just showing Null.

ie., success or error

Here is my ajax call code?

`$(document).ready(function(){
            $('#empTable').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url':'ajaxfile.php'
                },
                cache: false,
                'columns': [
                    { data: 'emp_no' },
                    { data: 'first_name' },
                    { data: 'last_name' },
                    { data: 'gender' },
                    { data: 'hire_date',
                    "render": function (data) {
        var dateObj = new Date(data);
        var month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
        var date = ('0' + dateObj.getDate()).slice(-2);
        var year = dateObj.getFullYear();
        //var shortDate = year + '/' + month + '/' + date;
        return (date + '/' + month + '/' + year);
    } 


    },
                ],
                rowReorder: {
            dataSrc: 'id'
            }



            });
        });`

Any help is highly appreciated.

Problem with export in tabbed pages

$
0
0

I have a SPA application where I have problems to export data from some of the datatables. It seems to me that if the datatables are contained in different containers or pages they will work but i can't quite figure it out. For example a page
with a table like this

<div vxa-role="page" vxa-page="employees" vxa-init-function="EmployeeService.LoadEmployees()" vxa-show-function="EmployeeService.LoadEmployees()" class="collapse">
            <div class="container-fluid">
                <br>Behöriga tjänstemän<br>
                <table id="editEmployeeTable" class="table table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Namn</th>
                            <th>TjänstemannaNr</th>
                            <th>AnvändarId</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

The export will work but not in a page like

<div class="tab-pane" id="car-tabber-herds" role="tabpanel">
                        <form id="editCarResponsibilityTableForm">
                            <div class="container-fluid">
                                <table id="editCarResponsibilityTable" class="table table-hover" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>SE-nummer</th>
                                            <th>Gårdsnamn</th>
                                            <th>Adress</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </form>
                    </div>

Both tables use an editor and are initiated with similar code like below

employeeTable = $('#editEmployeeTable').DataTable({
            'language': {
                'url': '/js/language/datatables_swe.json'
            },
            'dom': 'Bfrtip',
            'buttons': [
                {
                    extend: 'collection',
                    text: 'Exportera',
                    buttons: [
                        'excel',
                        'pdf'
                    ]
                },
                //,
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                {
                    extend: "remove",
                    editor: editor,
                    formMessage: function (e, dt) {
                        var rows = dt.rows(e.modifier()).data().pluck('name');
                        return 'Är du säker på att du vill radera ' +
                            'följande tjänsteman(män)? <ul><li>' + rows.join('</li><li>') + '</li></ul>';
                    }
                }
            ],
            'lengthChange': false,
            'order': [1, 'asc'],
            'select': {
                style: 'single'
            },
            'columns': [

I'd be grateful for any suggestions as this is a real showstopper

On Create only - set select2 data

$
0
0

Essentially, I have 2 tables that load projects and upon selecting a project row loads the set cost codes into the second table. All works properly on edit and remove.
We have a standard list of cost codes that I would like to load into a select2 and show only when I Create a new record. This would then use the code and description from the standard list and add to the projects code table. I feel comfortable getting the ajax data loaded but not sure where to start to setup the form to only show the standard list of codes on create only. Any help in pointing me in the right direction is greatly appreciated.

How to refresh datatable columns on click event

$
0
0

I have a form with dropdown. On changing dropdown i will get data which varies everytime. Im binding data and columns dynamically. Dynamic columns are working fine for first time but from second time onwards data is coming fine but it is not binding to table.

title and messageTop on each sheet of print

$
0
0

Is there any way to print the title and messageTop on each print sheet?

Viewing all 79603 articles
Browse latest View live




Latest Images