Export data to an Excel file by utilizing the features of Dat

Looking to export data to Excel? Check out the code snippet below.

$('#tabelku').dataTable({
                        
                        dom: 'Bfrtip',
                        "buttons": [{
                            extend: 'excel',
                            text: 'Excel'
                            
                            }
                        ],
                        dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
                        "aLengthMenu": [
                            [10, 20, 30, 40, -1],
                            [10, 20, 30, 40, "All"] // adjust page values here
                        ],
                        
                        "bProcessing": true,
                        "bServerSide": true,
                        "sServerMethod": "POST",
                        "bRetrieve": true,
                        "sAjaxSource": "<?= site_url() ?>monev/do_Tabel_Universitas",
                        // set initial value
                        "iDisplayLength": 10,
                        "oLanguage": {
                            "sProcessing": '<i class="fa fa-coffee"></i>&nbsp;Please wait...',
                            "sLengthMenu": "_MENU_ records",
                            "oPaginate": {
                                "sPrevious": "Prev",
                                "sNext": "Next"
                            }
                        },
                        "aoColumnDefs": [{
                                'bSortable': false,
                                'aTargets': [0, 8]
                            }
                        ],
                        
                    });

The Excel button is visible, but you're missing the dropdown for 10, 20, 30, and 40 records. This dropdown was showing before adding the following code:

dom: 'Bfrtip',
                        "buttons": [{
                            extend: 'excel',
                            text: 'Excel'
                            
                            }
                        ],

Any idea what code I might be overlooking?

Answer №1

You have set the dom option twice, and it appears that the first one is being used as you are not seeing the length dropdown. The first option does not include a l, which is why the length dropdown is not showing.

                        dom: 'Bfrtip',
                        "buttons": [{
                            extend: 'excel',
                            text: 'Excel'
                            
                            }
                        ],
                        dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
                        "aLengthMenu": [
                            [10, 20, 30, 40, -1],
                            [10, 20, 30, 40, "All"] // change per page values here
                        ],

To display both the buttons and the length dropdown, remove one of the dom options and ensure that the one you keep includes both the B (for buttons) and the l, like this:

dom: '<"row"<"col-lg-6"Bl><"col-lg-6"f>><"table-responsive"t>p',

For more information, visit: https://datatables.net/reference/option/dom

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding Node.js document object

Hey, I'm currently trying to execute a JavaScript function on the server side using node.js, but I've encountered an issue. The function relies on accessing hidden values within the returned HTML using the document DOM, however, the document obje ...

Issue with Backbone view not initializing properly when navigating using the browser's back or forward buttons

My single page backbone application loads new pages via AJAX and updates the URL using the history API. However, when I press the back button, the URL changes but the previous AJAX content is not loaded. As I try to fix this issue, a strange error occurs ...

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

Is there a way to trigger a function from a specific div element and showcase the JSON data it retrieves in

I am working with a React JS code page that looks like this: import React, { useState } from "react"; import { Auth, API } from "aws-amplify"; function dailyFiles(props) { const [apiError502, setApiError502] = useState(false); // Extracted into a re ...

Move items between two tree views using Javascript and jQuery drag and drop functionality

Recently, I have been on a quest to find drag and drop functionality for moving tree listing items between two separate tree views. While I did come across some solutions that work within a single tree, I have yet to find one that specifically caters to tr ...

how to prevent certain dates from being selected in a jQuery HTML date picker

Hello everyone, I'm currently working on implementing a datepicker on my webpage and need to disable certain dates from it. Below is the code snippet I am using: <!doctype html> <html> <head> <meta charset="UTF-8"> ...

What is the most efficient way to remain on the current page after sending a post request and then sending another post request?

For my one-page website project, I am working on a form that allows users to input text and upload files. The desired functionality of the form includes typing text in a textarea, selecting multiple files, uploading them after clicking a button, and then s ...

Tips for setting the maximum height of flex children within a parent that is also a flex child to match the parent's height based on its own flex properties

Imagine a scenario where you have a container with flex display and column direction, set at a height of 600 units for this example. This container has three child elements, each with a flex property value of 1. The first two children simply display some ...

What are the options for app directory routing and programmatic navigation in the upcoming 13 application

I am currently working on a project called Next 13 that involves using the app directory and MUI 5. The project's structure is organized as follows: ./src ./src/app ./src/app/dc ./src/app/dc/admin ./src/app/dc/admin/dc_types.jsx However, when I try t ...

oamSubmit.js is absent if f:ajax is used on a webpage

I've encountered a frustrating issue while using MyFaces that is really getting on my nerves. I have tried versions 2.2.10 and 2.2.12, along with PrimeFaces 6.0, although the latter may not be relevant. Every time I add an f:ajax tag to a page, my co ...

"PHP Dilemma: Navigating the Ajax Button Press Situation

I've been attempting to create a button that triggers a PHP script on a webpage and updates only a specific div tag, but so far I haven't had any success. Removing the $ajax section of the script allows my buttons to change states, but as soon as ...

What is the best method for testing an Angular service that has dependencies in Jasmine?

My service implementation is structured as follows: angular.module('app').service('MyService' , function (dependency1, dependency2, dependency3 ...) { function funcToTest() { // Do something } } I am wondering how I ca ...

Learn how to automatically set the checked state of a radio button by toggling another radio button

I have two sets of radio buttons, each with four options. The first set has no default selection (unchecked) using jQuery, while the second set has the first option checked by default. What I'm looking to achieve is that when a radio button in the f ...

Retrieve the link of a nearby element

My goal is to create a userscript that has the following functionalities: Add a checkbox next to each hyperlink When the checkbox is clicked, change the state of the corresponding hyperlink to "visited" by changing its color from blue to violet. However ...

Convince me otherwise: Utilizing a Sinatra API paired with a comprehensive JS/HTML frontend

As I embark on the journey of designing a social website that needs to support a large number of users, I have come up with an interesting approach: Implementing Sinatra on the backend with a comprehensive REST API to handle all operations on the website ...

Having trouble importing a React component from a different directory?

I have included the folder structure for reference. Is there a way to successfully import the image component into the card component? No matter which path I try, I keep encountering this error: ./src/Components/Card/Card.js Module not found: Can't ...

Setting values for an array in Javascript

Is there a way to divide a given value by 10 and store the resulting values in an array? How can I then assign these values back to 'array1' within a for loop? var value = 300000; var array1= new Array(11); var yaxispoints = value / 10; for(v ...

Is there a way to create an event listener that responds to a simultaneous click of both mouse buttons?

Despite my extensive research on the Internet, I was unable to find any examples. Interestingly, Vue only supports right and left clicks separately which I find peculiar as it seems like a basic task that can easily be accomplished with plain Javascript. ...

Ensure that the search box produces identical results for both the input "abc123" and "abc 123"

This dropdown search box is functioning flawlessly..... However, I want the option "Contact us" to display the same result whether someone searches for "contactus" or "contact us". In both cases, the outcome should be identical. I prefer not to add two s ...

Tips on using JQuery to extract form field information from a drop-down menu, display it in a div, and then compare it with the subsequently

In my HTML file, I am using two dropdown lists and JQuery for validation. First, I need to save the selected items from both dropdown lists in a variable and then compare them with the next selection. If the data from both dropdown lists match, an alert m ...