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

searchBuilder & stateSave | searchBuilder can't restore state when a field contains &

October 21, 2024, 7:09 am
$
0
0

Link to test case:
https://live.datatables.net/xefezaje/1/edit?html,css,js,output

Debugger code (debug.datatables.net):
Not required

Error messages shown:
None

Description of problem:
Initialize a table with stateSave and searchBuilder. Ensure the table contains a field that contains an & character (encoded as &).

When selecting that field value (Name, equals, Use & Monitoring in the example) in the searchBuilder and reloading the page, the state isn't properly restored and the equals filter in the searchBuilder is blank.

Any help is much appreciated, I can't track it down easily.

Willem

↧
Search

BUG: DT2 - Only one paging button is shown

February 16, 2024, 11:13 am
$
0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hello developers,

I'm excited to migrate from v1.13.10 to v2.0.0. I have an issue with paging buttons (without attaching styling)

I have 3500 records, each page displays 10 records. I'm using 'simple_numbers'.
In v1, I can see paging buttons "<" "1", "2", "3", "4", "5", ..., "350" ">".
In v2, I can see paging buttons "<" "1" ">" (when I click on Next, "1" will be replaced with "2")

So it is related to rendering issue.

I investigated the source code.

    function _pagingDraw(settings, host, opts) {
         ....
        // Responsive - check if the buttons are over two lines based on the
        // height of the buttons and the container.
        if (
            buttonEls.length && // any buttons
            opts.numbers > 1 && // prevent infinite
            $(host).outerHeight() >= ($(buttonEls[0]).outerHeight() * 2) - 10
        ) {
            _pagingDraw(settings, host, $.extend({}, opts, { numbers: opts.numbers - 2 }));
        }
    }

In my case, the value of $(host).outerHeight() is 0, the value of $(buttonEls[0]).outerHeight() is also 0.
If I put breakpoints into _pagingDraw. I can see nested call of _pagingDraw.
The value of numbers is decreased from 7 to 5 to 3 and then down to 1.

My current workaround is to specify a height in css file for the paging-container.
I'm not sure why the calculated height is 0, although Chrome DevTool tells its 52px.


I'm wondering if comparing the outer heights of host & buttons only when heights are positive values?
Hope my investigation makes sense.

↧
↧

Print view - missing styles

October 21, 2024, 12:11 pm
$
0
0

Link to test case:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.1.8/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/dt/dt-2.1.8/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
    <style>
       .fw-bold {
           font-weight: bold;
       }
    </style>
  </head>
  <body>
    <div class="container">
<table id="example" class="display nowrap" width="100%">
  <thead>
  <tr>
     <th rowspan="2">Name</th>
     <th rowspan="2" class="noColvis">Position</th>
     <th colspan="3" class="noColvis">Values</th>
  </tr>
  <tr>
     <th>Val1</th>
     <th class="noColvis">Val2</th>
     <th>Val3</th>
  </tr>
  </thead>
 
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td class="dt-right fw-bold">0.5</td>
      <td>Edinburgh</td>
      <td class="dt-right fw-bold">61</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Director</td>
      <td>0.5</td>
      <td>Edinburgh</td>
      <td>63</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Technical Author</td>
      <td>0.5</td>
      <td>San Francisco</td>
      <td>66</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Javascript Developer</td>
      <td>0.5</td>
      <td>Edinburgh</td>
      <td>22</td>
    </tr>
  </tbody>
</table>
    </div>
  </body>
</html>

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: [
              {
                extend:'print',
                autoPrint:false
              }
            ]
        }
    }
});

Description of problem:
Styles added to individual cells are not copied to the Print view. See classes added to 1st row above.
This is not an important issue for me, but the styles did transfer over to the Print view before I upgraded (DataTables 1.13.6 --> 2.1.8, Buttons 2.4.2 --> 3.1.2).

↧

Something wrong with hidden cols , ordering and order indicator

February 22, 2024, 8:08 am
↧

Pager Type Default

October 3, 2024, 11:49 am
$
0
0

Why was the default of this changed to Full Numbers when Simple Numbers already always shows the first and last numbers that can be clicked making the First and Last buttons not needed? I personally like the smaller arrows for Next and Prev without the text, but the testers are flipping out on the big change.

↧
↧

how to properly destroy and reinitialize a datatable?

October 16, 2024, 11:57 pm
$
0
0

Description of problem:
i am having problem destroying and re-initializing a datatable. i have created a generic datatable component in react to be used on different tables. but the problem is that when the data in the table changes then the changes are not seen properly on the table. for example after deleting an item from table, the item still can be seen in the table. and after deleting and adding an item to the table the page crashes with an error. all of this problem is the datatable is not properly being destroyed or being re-initialized properly. i have used options like .destory(), destroy: true and retrieve: true but these options seem not to be working properly. Here is the code for the MasterDataTable component:

import React, { useEffect, useRef, useState } from 'react';
import $ from 'jquery';
// import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import "datatables.net-dt/js/dataTables.dataTables";
import "datatables.net-dt/css/dataTables.dataTables.min.css";
import "datatables.net-buttons/js/buttons.colVis";
import "datatables.net-buttons/js/buttons.html5";
import "datatables.net-buttons/js/buttons.print";
import "datatables.net-buttons/js/dataTables.buttons";
// import 'jszip';
import JSZip from 'jszip'; 
import 'pdfmake';
// import 'pdfmake/build/pdfmake';
// import 'pdfmake/build/vfs_fonts';
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import DataTable from 'datatables.net-buttons-dt';

window.JSZip = JSZip;
pdfMake.vfs = pdfFonts.pdfMake.vfs;


const MasterDataTable = (prop) => {
  const { tableId, tableData } = prop
  const dataTableRef = useRef(null);

  useEffect(() => {

         if ($.fn.DataTable.isDataTable(`#${tableId}`)) {
          $(`#${tableId}`).DataTable().destroy();
          console.log("destroyed")
         }
        if(tableData?.length > 0){
        dataTableRef.current =  new DataTable(`#${tableId}`, {
            pagingType: 'full_numbers',
            pageLength: 10,
            processing: true,
            responsive: true,
            destroy: true,
            retrieve: true,
            dom: 'Bfrtip',
            orientation: tableData[0] && tableData[0].length > 4 ? 'landscape' : 'portrait', // Set orientation based on column count
            pageSize: tableData[0] && tableData[0].length > 4 ? 'A3' : 'A4', // Adjust page size based on the number of columns
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                      columns: ':visible', 
                      modifier: {
                        page: 'all'
                      },
                      format: {
                          body: (data, row, column, node) => {
                          // Dynamically handle the Status column
                              if ($(node).closest('td').hasClass('status-column')) {
                              return $(data).find('input').is(':checked') ? 'True' : 'False';
                              }
                              return $(node).text().trim();
                          }
                      },
                      stripHtml: true,
                    },                  
                },
                {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible',     
                    modifier: {
                    page: 'all'
                    },
                    format: {
                      body: (data, row, column, node) => {
                      // Dynamically handle the Status column
                        if ($(node).closest('td').hasClass('status-column')) {
                        return $(data).find('input').is(':checked') ? 'True' : 'False';
                        }
                        return $(node).text().trim();
                      }
                    },
                    stripHtml: true,
                }
                },
                {
                  extend: 'excelHtml5',
                  exportOptions: {
                    columns: ':visible',
                    modifier: {
                      page: 'all'
                    },
                    format: {
                      body: (data, row, column, node) => {
                      // Dynamically handle the Status column
                        if ($(node).closest('td').hasClass('status-column')) {
                        return $(data).find('input').is(':checked') ? 'True' : 'False';
                        }
                        return $(node).text().trim();
                      }
                    },
                    stripHtml: true,
                  }
                },
                {
                  extend: 'pdf',
                  exportOptions: {
                    columns: ':visible', 
                    stripHtml: false,
                    modifier: {
                      page: 'all'
                    }
                  }
                },
                {
                    extend: 'print',
                    exportOptions: {
                      columns: ':visible', 
                      stripHtml: false,
                      modifier: {
                        page: 'all'
                      }
                    }
                  },
                'colvis',

              ],
              initComplete: ()=> {
                // $(`#${tableId}`).addClass('table table-bordered table-hover toggle-circle custom-table table');
            }
            });
            console.log(`DataTable with ID #${tableId} initialized.`);

    }

  }, [tableId, tableData]);


//   return null; // No need to render anything
};

export default MasterDataTable;
↧

Extra field to control another one via dependent() always being sent to server

October 22, 2024, 2:57 am
$
0
0

Hi, I'm using Editor and I have the necessity to add a checkbox that controls the value of an upload field. Here's the behaviour I'm trying to get:
I have an upload field for an image and I want to 'store' if that upload is necessary or not. So I added this field to my editor

{
        label: '',
        name: 'noimg',
        type: "checkbox",
        options: [
            { label: 'No image required', value: 1 }
        ],
        separator: '',
        unselectedValue: 0
}

And through dependent():

editor.dependent('noimg', function (val, data, callback) {
        if (val == 1) {
            editor.field('prodotti.immagine').set(0);
            editor.hide('prodotti.immagine');
        } else {
            if (editor.field('prodotti.immagine').val() == 0) {
                editor.field('prodotti.immagine').set('');
            }
            editor.show('prodotti.immagine');
        }
        callback(true);
    });

I show/hide and set value for the upload field, based on the checkbox status.
The editor is set to 'changed' to submit only changed fields. However, since I added noimg field, every edit ends with noimg data being submitted with 0 value.
Is there an option to prevent a field from being sent to the server? Or am I using the wrong approach to obtain this?
Thank you!

↧

Disable filtering while still mantaining the search box

October 22, 2024, 3:02 am
$
0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hello! I am trying to use a datatable to display some data, and update the data shown using an ajax endpoint, and I want to disable the search box filtering the data before the endpoint updates it. I have tried the following and the function "$.fn.dataTable.ext.search.push" is called but it still filters the rows.

The code is like so:

$(document).ready(function() {
let table = $('#info-table').DataTable();

$('.dataTables_filter input').on('input', function() {
        clearTimeout(typingTimer);  
        let searchValue = $(this).val();  
        const company = `{{search.company}}`
        
        typingTimer = setTimeout(function() {
            
            $.ajax({
                url: '{% url "dataendpoint" %}',  
                data: {q: searchValue },  
                success: function(response) {
                    
                    table.clear();

                    $.each(response.results, function(index, item) {
                        
                        let rowData = `
                            item.data
                        `;

                        
                        table.row.add($(rowData)).draw();
                    });

                    
                    table.draw();
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching data:", error);
                }
            });
        }, doneTypingInterval); 
    });

    // Clear the timer if the user continues typing
    $('.dataTables_filter input').on('keydown', function() {
        clearTimeout(typingTimer);
    });
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        return true;
    });
});

Thank you!

↧
Search

Question about jQuery event delegation / Colvis / Colreorder / multiple table headers

October 22, 2024, 6:20 am
$
0
0

Hi,

I have the following problem.

My datatable has multiple header lines, the second one being with column search inputs.

Also, I have the Colvis and Colreorder plugins enabled.

When I mousedown on a column search input, Colreorder kicks in and I can drag the column. Which is not what I want. I can disable this behaviour by registering an event handler like the following:

$('input.localSearchInput').on('mousedown', function (event) {
  event.stopPropagation();
});

Now, the problem is, when I enable a previously invisible column with Colvis, the event handler doesn't apply to that "newly visible" column. I found out that I probably need a delegated event handler in this case:

$(document).on('mousedown', 'input.localSearchInput', function (event) {
  event.stopPropagation();
});

The problem here is: it doesn't stop the mousedown event from propagating to Colreorder, unlike when I'm directly registering on input.localSearchInput and I do not understand why.

Does anybody have an idea?

Thanks a bunch in advance.

↧
↧

How to reduce table width when removing columns

October 22, 2024, 7:43 am
$
0
0

I'm using "colvis" in the Buttons extension.

There are many columns on my table. When I hiden a column using colvis, the availble space is reused and the table keeps its initial size.
Is there a way that the removing of a column will reduce the width of the table ?

Regards,

↧

Dependent field handler not invoked if multiple differing rows selected

July 19, 2024, 8:50 am
$
0
0

Hi,

I've noticed that the dependent field handler (https://editor.datatables.net/reference/api/dependent()) does not get invoked if I have multiple rows selected that have differing values for the field in question.

This causes an issue if I am showing/hiding a field - the edit popup is shown in whatever state it was last left in last time it was shown.

I tried to put an example together below but it doesn't fully function due to the lack of server side data.  

https://live.datatables.net/qurowaqo/2/edit

However, taking the dependent handler from that example, it's supposed to hide the "Age" field if editing a "London" row:

editor.dependent('Office', function (val, data, callback, e) { return val === 'London' ? { hide: 'Age' } : { show: 'Age' }; });

If when creating a new row I set the office to "London", the "Age" field disappears. If was to subsequently shift-select a "London" row AND a "New York" row, then hit "Edit", the "Age" field would still be hidden on the edit popup that appears, because the dependent function was never invoked for this latest edit.

I propose that the dependent function is called even if multiple rows with differing values are selected, but the value of the field should be set to null if it differs across the selected rows. The handler could then be updated to deal with this scenario.

-David.

↧

Columns data going missing

October 22, 2024, 8:26 am
$
0
0

I am sorry - but I cannot reproduce this in stand-alone code, so I cannot create a test case and such things. I can only describe my experience, and if someone has some info for me, I will appreciate it. If not - thanks for reading anyway.

I have custom filters built with multi select dropdowns, as the instance I am using does not have search panes plugin, and it is not feasible to convert all 400+ listings we have to search panes at this time.

The ajax function that retrieves the data for these filters is called for every filter (I have asked the reason why this is the case before, and I believe I was told that it is standard).

Let's say the filters are:

  • Status (user filterable)
  • City (initially populated through URI to pre-filter by city, but additional cities can be selected/filtered)
  • Residence (user filterable)

What happens is this - when the columns are being processed, they are done as follows:

  • Status (status arguments are set for the data query)
  • City (city arguments are set for the data query, status arguments remain populated)
  • Residence (residence arguments are set, status arguments remain populated, but city arguments are now not in the columns)

All of the filters are multiple-select dropdowns, all of them have correctly formed data (correct key : value pairs).

I can't figure out how the "columns" data gets unset occasionally.

I understand this is vague and difficult to visualize, I apologize. I can show with a screen cast what happens if someone is interested in seeing via a Google Meet or something.

Thanks in advance!

Blix

↧

Wrong column size when I use colspan in first row

February 27, 2024, 3:17 am
$
0
0

Hello everybody,
I have a problem with version 2.0.0, to illustrate it I took an example from this website. In particular, by enabling scroll datatables, the size of the first column is incorrect. I verified that if the first row has a "colspan" attribute equal to 3, datatables forces the sum of the first three columns into the first column. The same error occurs with the "rowGroup" plugin only if the first row has the "colspan" attribute. Below example:

var dataSet = [
    ['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
    ['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
    ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
    ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
    ['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
    ['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000'],
    ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '$137,500'],
    ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '$327,900'],
    ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '$205,500'],
    ['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '$103,600'],
    ['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '$90,560'],
    ['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '$342,000'],
    ['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '$470,600'],
    ['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '$313,500'],
    ['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '$385,750'],
    ['Michael Silva', 'Marketing Designer', 'London', '1581', '2012/11/27', '$198,500'],
    ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', '3059', '2010/06/09', '$725,000'],
    ['Gloria Little', 'Systems Administrator', 'New York', '1721', '2009/04/10', '$237,500'],
    ['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '$132,000'],
    ['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '$217,500'],
    ['Jenette Caldwell', 'Development Lead', 'New York', '1937', '2011/09/03', '$345,000'],
    ['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', '6154', '2009/06/25', '$675,000'],
    ['Caesar Vance', 'Pre-Sales Support', 'New York', '8330', '2011/12/12', '$106,450'],
    ['Doris Wilder', 'Sales Assistant', 'Sydney', '3023', '2010/09/20', '$85,600'],
    ['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', '5797', '2009/10/09', '$1,200,000'],
    ['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '$92,575'],
    ['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '$357,650'],
    ['Brenden Wagner', 'Software Engineer', 'San Francisco', '1314', '2011/06/07', '$206,850'],
    ['Fiona Green', 'Chief Operating Officer (COO)', 'San Francisco', '2947', '2010/03/11', '$850,000'],
    ['Shou Itou', 'Regional Marketing', 'Tokyo', '8899', '2011/08/14', '$163,000'],
    ['Michelle House', 'Integration Specialist', 'Sydney', '2769', '2011/06/02', '$95,400'],
    ['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '$114,500'],
    ['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '$145,000'],
    ['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '$235,500'],
    ['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '$324,050'],
    ['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '$85,675'],
];

$('#table-data').DataTable({
    columns: [
        { title: 'Name' },
        { title: 'Position' },
        { title: 'Office' },
        { title: 'Extn.' },
        { title: 'Start date' },
        { title: 'Salary' }
    ],
    data: dataSet,
    paging: false,
    scrollCollapse: true,
    scrollY: '200px',
    order: [[2, 'asc']],
    drawCallback: function (settings) {
        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        var last = null;

        api.column(2, { page: 'current' })
            .data()
            .each(function (group, i) {
                if (last !== group) {
                    $(rows)
                        .eq(i)
                        .before(
                            '<tr class="group"><td colspan="5">' +
                            group +
                            '</td></tr>'
                        );

                    last = group;
                }
            });
    }
});

Thanks for your help.

Norberto.

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

↧
↧

ColReorder error when re-initialising datatable after updating table data

October 23, 2024, 2:29 am
$
0
0

Link to test case: https://jsbin.com/xizisamaje/edit?html,css,js,console,output
Debugger code (debug.datatables.net): adicof
Error messages shown:

datatables.min.js:26 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at _._scrollRegions (datatables.min.js:26:7747)
    at _._mouseDown (datatables.min.js:26:5194)
    at HTMLTableCellElement.<anonymous> (datatables.min.js:26:3934)
    at HTMLTableCellElement.dispatch (jquery-3.7.1.min.js:2:40035)
    at v.handle (jquery-3.7.1.min.js:2:38006)

Description of problem: Re-initialising the datatable after replacing the table data through jQuery causes re-ordering columns to stop working and log an error message. Other functionality appears to still work.

↧

Assistance Needed with React DataTable Fixed Column Feature

October 23, 2024, 1:54 am
$
0
0

Hello,

I hope you are doing well.

I am currently using React DataTable in my project, and it has been working well so far. However, I am trying to implement the fixed columns functionality, and I am encountering an issue. When I add fixedColumns inside the options, I receive the following error:

Object literal may only specify known properties, and 'fixedColumns' does not exist in type 'Config'.(2353)
index.d.ts(26, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & DataTableProps & RefAttributes<DataTableRef>'

Here is a snippet of my code.

    import DataTable from 'datatables.net-react';
    import DT from 'datatables.net-dt';
    import 'datatables.net-responsive-dt';
    import 'datatables.net-select-dt';

    import 'datatables.net-fixedcolumns-dt';

    import './App.css';

    DataTable.use(DT);

    function App() {
      const columns = [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary' },
      ];

      return (
        <>
          <div>
            <h1>Using DataTables Extensions</h1>
            <h2>DataTables + React example</h2>
            <p>
              This example demonstrates the <code>datatables.net-react</code>
              package being used with DataTable's events through <code>
                on*
              </code>{' '}
              properties on the component.
            </p>
            <p>
              Full documentation for the DataTables React component is{' '}
              <a href="https://datatables.net/manual/react">
                available in the DataTables manual
              </a>
              .
            </p>

            <DataTable
              ajax="/data.json"
              columns={columns}
              className="display"
              options={{
                fixedColumns: {
                  start: 1,
                  end: 1
                },
                paging: false,
                scrollCollapse: true,
                scrollX: true,
                scrollY: "300px"
              }}
            >
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Position</th>
                  <th>Office</th>
                  <th>Extn.</th>
                  <th>Start date</th>
                  <th>Salary</th>
                </tr>
              </thead>
            </DataTable>
          </div>
        </>
      );
    }

    export default App;

Could you kindly assist me with this issue? I have been searching for a solution for the past three days, but I haven't been able to resolve it.

Your help would be greatly appreciated. Thank you in advance for your prompt assistance.

↧
Search

Styling buttons collection with html option + daisy ui

October 23, 2024, 3:25 am
$
0
0

I have the following buttons showing has dropdown menu.

buttons: [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'csv', 'excel', 'pdf'
                ],
            },
            {
                extend: 'collection',
                text: 'Columns',
                buttons: [
                    'columnsToggle'
                ]
            }

        ],

How can I use the html option to build a custom dropdown menu? I am using daisy ui and I would like the dropdown to be displayed in the same format as daisy ui. Is that possible without having to use plain css?

↧

Disable sorting in Editor options field (PHP)

October 1, 2024, 2:30 am
$
0
0

Description of problem: I have source of Editor field options made as database view with elaborated sorting. Is there a way to keep db sorting in field options? PHP API docs for order() method states "If this option is not provided the ordering will be based on the rendered output, either numerically or alphabetically based on the data returned by the renderer." While I use field renderer, output get sorted anyway (wrong way).
I was also trying to directly use order() method, but my sort rules seems to be too much. In case you are curious, I need someting like this: order by date is null desc, name, date desc

↧
↧

Vertical Page Fitting pushing table off the bottom of the screen.

October 23, 2024, 8:25 am
$
0
0

I'm trying to use this functionality: https://datatables.net/blog/2015/vertical-page-fitting

In my page I have a sidebar set up like so:

<div class="d-flex align-items-end flex-column flex-shrink-0 p-3" style="width: 240px">
</div>

Then I have a container with several rows and the final row is a table with height set to 100.:

<div class="container">
  <div class="row h-auto">
  <div>
  <div class="row h-auto">
  <div>
  <div class="row h-100">
  <div>
</div>

That final div has a form and table with form submission buttons in it:

<form id="upd-form" method="post">

    <table id="EngineTable" class="table table-striped nowrap table-sm" width="100%" style="display:none">
        <thead>
            <tr>
                <th>Id</th>
                <th>Engine</th>
                <th>Server</th>
                <th>DC</th>
                <th>Exchange</th>
                <th>Strategy</th>
                <th>Owner</th>
                <th>Use</th>
                <th>Env</th>
                {% if accessLevel == "Admin" %}
                <th>Actions</th>
                {% endif %} 
            </tr>
        </thead>
        <tbody>
            {% for row in engines %}
            <tr>
                <td>{{ row.EngineId }}</td>
                <td>{{ row.EngineName }}</td>
                <td>{{ row.ServerName }}</td>
                <td>{{ row.DataCenter }}</td>
                <td>{{ row.Exchange }}</td>
                <td>{{ row.TradingStrategyName }}</td>
                <td>{{ row.OwnerGroup }}</td>
                <td>{{ row.UseCase }}</td>
                <td>{{ row.EnvironmentType }}</td>
                {% if accessLevel == "Admin" %}
                <td>
                    <button type="submit" id="StopEngineBtn" value="{{ row.EngineName }}" name="StopEngineBtn" class="btn btn-primary btn-sm btn-danger">Stop</button> &nbsp;&nbsp;&nbsp;
                    <button type="submit" id="StartEngineBtn" value="{{ row.EngineName }}" name="StartEngineBtn" class="btn btn-primary btn-sm btn-success">Start</button> &nbsp;&nbsp;&nbsp;
                    <button type="submit" id="RestartEngineBtn" value="{{ row.EngineName }}" name="RestartEngineBtn" class="btn btn-primary btn-sm btn-warning">Restart</button>
                </td>
                {% endif %} 
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            new DataTable('#EngineTable', {
                responsive: true,
                pageResize: true,
                initComplete: function() {
                    $('#EngineTable').show();
                }
            });
        });
    </script>
</form>

It seems like pageResize is working but it's trying to set the height of the table to the full height of the screen instead of the height that's available after the two rows above it are factored in. It this just a limitation of the functionality or am I missing a step?

↧

ScrollX Not Working When Sidebar is Collapsed in Chrome

October 23, 2024, 8:53 am
$
0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:

Description of problem:

Hi everyone,

I’ve encountered an issue with DataTables' scrollX functionality on my web app. When the sidebar is collapsed, the horizontal scroll no longer works. However, when the sidebar is expanded, the scroll works as expected.

This behavior only occurs in Chrome—the scroll works fine in Safari, Edge, and Firefox regardless of the sidebar state.

The only error message shown in the console is the following, but it appears both when the sidebar is collapsed and expanded:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

Has anyone come across this issue or know of any workarounds? Are there any known compatibility problems between Chrome and scrollX when paired with dynamic layouts like sidebars?

Any guidance would be greatly appreciated!

Thanks in advance!

↧

Bootstrap 5 styling for date picker

October 23, 2024, 1:08 pm
$
0
0

Hello all, not sure if maybe I have something wrong in my CSS but this is what the date picker looks like when filtering:

Does anyone know if there's a bootstrap 5 styling for the date picker? Or is there just something weird with my CSS? Thanks!

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