Datatables responsive не работает

JQuery DataTables с Bootstrap Styling и отзывчивое расширение не работают

В моей html-странице я заменил пример этой . В теге head у меня есть следующее:

Я вызываю datatable в конце тела с помощью:

Мой код похож на пример на сайте DataTable. Он работает, и мой не работает. Зачем?

Неужели рушится работа? В чем проблема, которую вы получаете. Любая консольная ошибка?
Я скопировал тот же код, что и вы упомянули выше, и создал пример скрипта. Вы можете проверить это здесь? Пример скрипта для отзывчивого DataTable
Надеюсь, это поможет.

Похоже, что в ваших строках css и js слишком много символов // . Вторая ссылка css:

и это должно быть:

Второй и третий вызовы script также имеют такую ​​же проблему.

Помещение: я пишу этот ответ, потому что сталкиваюсь с той же проблемой, и поскольку я не нахожу хороший пример/учебник, я объясню, как я буду с этим разбираться.

Я предлагаю посмотреть исходный код на странице компоновки Bootstrap DataTables

Эта страница показывает DataTables и ответное расширение, используемое с базой Bootstrap, обеспечивающей стиль

Сначала было сказано, что ниже демонстрационной таблицы, отображаемой в Stutting Bootstrap DataTables, для этого случая используются правильные CSS, JS и HTML, и если я не ошибаюсь, они также размещаются в правильном порядке,

у вас есть еще один вариант:

просто смотрите на исходный код этой страницы, например. в Firefox я нажимаю Ctrl-u и в адресной строке открывается

это позволяет видеть исходный код отображаемого html.

Найдите ту же команду для своего браузера, и вы увидите, как на веб-сайте DataTables они настраивают сценарии CSS (es) и JS (es), чтобы заставить ее работать.

Что выглядит острой, так это то, что они просто используют этот script для инициализации таблицы

поэтому не используется ключевое слово responsive ,

что делает его ярким, что магия выглядит синглами CSS и JS (если правильно загружена).

В конце концов, чтобы начать с безопасной точки, поместите загрузку js-скриптов в разделе HEAD вашей тестовой страницы html и начните с успешной работы,

только после положительного теста, если необходимо, переместите их туда, где вы хотите.

Источник

Не работают функции в DataTable

Здравствуйте, у меня есть mysql бд, в которой 1000+ записей, несколько таблиц и тд.
Мне нужно ее корректно отобразить, я выбрал для этого DataTable,вроде бы все корректно подключил, но функции сортировки столбцов не работают, поиск не работает, отображение по 10,20,30. записей не работает, что я сделал неверно?

php файл, где я обращаюсь к базе данных и записываю данные в массив (getData.php)

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Как из одного datatable перенести столбец в другой datatable?
Здравствуйте! Кто может подсказать: как из одного datatable перенести столбец в другой datatable?

Создание массива DataTable с разными DataTable
Здравствуйте. Писал класс где нужно создать массив из 10 разных DataTable (в таблице 1 столбец и.

Как передать столбец данных из DataTable в качестве аргумента функции
Добрый день. 1. Есть три таблицы DataTable две с входными данными и одна с результатами расчета.

Не работают функции в методе (функции-члене)
Сделал программу которая решает по формуле задачу. Все работает, но стоило вынести нахождение y в.

Не работают функции
Приветствую. Никак не могу понять, какую библиотеку надо скачивать. Скачал программку .

Функции IN, OUT не работают
Изучаю Ассемблер. Сейчас разбираю по примерам учебника Рудакова и Финогенова «Язык Ассемблера.

Не работают функции)
package com.company; import java.io.*; import java.util.Arrays; import java.util.Scanner; .

Не работают функции
Не работают то ли функции, то ли неправильно к ним обращаюсь. Есть 3 функции: Выделение строки.

Не работают функции
Привет всем! В С# не работает функция abs и setPixel. Что надо подключить, чтоб они заработали?

Источник

Datatables — Responsive not working?

I am trying to understand why Datatables (https://datatables.net/) Responsive wouldn’t be working. Everything else is working great, paging, searching, ordering, etc.. but not responsive?

Below is what I have.

Any help will be greatly appreciated.

4 Answers 4

Try loading the libraries in this order like in the DEMO.

• You are missing https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css in your header and missed nowrap in class according to their examples.
• I personally would suggest to initiate responsive dataTable via javascript as it will provide more options to customise your UI.

Try using width=100% in table. Not pretty, but it worked for me.

Just use this script at the bottom of your file

It worked for me.

Not the answer you’re looking for? Browse other questions tagged javascript jquery html datatable or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.19.40494

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

responsive

Enable and configure the Responsive extension for DataTables.
Please note — this property requires the Responsive extension for DataTables.

Description

This option provides the ability to enable and configure Responsive for DataTables. In its simplest form as the boolean true it will enable Responsive with the default configuration options (as defined by $.fn.dataTable.Responsive.defaults ). It can also be used as an object to provide custom configuration options as described below.

Please note that as with all other configuration options for Responsive, this option is an extension to the default set of DataTables options. This property should be set in the DataTables initialisation object.

Types

boolean

As a boolean value this property will enable Responsive on the DataTable that is being created. true will enable Responsive, while false will not (even if the table has a class of responsive or dt-responsive ).

This is a short-cut option to enable Responsive with the default configuration options. Customisations can be made by giving this parameter as an object, see below.

object

If given as an object, Responsive will be enabled on the target DataTable, with the Responsive defaults ( $.fn.dataTable.Responsive.defaults ) extended, and potentially overwritten, by the options provided in this object. This is how Responsive can be configured on an individual table basis, or through the defaults.

Default

Responsive will not be initialised by default

Examples

Enable Responsive for a table:

Enable Responsive with configuration options:

Источник

Installation

DataTables is a powerful Javascript library for adding interaction features to HTML tables, and while simplicity is a core design principle for the project as a whole, it can appear quite daunting to get started. However, taking those first steps and getting DataTables running on your web-site is actually quite straight forward as you need only include two additional files in your page:

• The DataTables Javascript file
• The DataTables CSS file

There are other files available such as Editor for adding editing abilities, and other plug-ins, which can be used to extend the feature set of DataTables, but basically, all you need to do is include these two files to get up and running!

Requirements

Before we get started, we need to consider the requirements DataTables has in order to operate.

Dependencies

DataTables has only one library dependency (other software upon which it relies in order to work) — jQuery. Being a jQuery plug-in, DataTables makes use of many of the excellent features that jQuery provides, and hooks into the jQuery plug-in system, in the same way as all other jQuery plug-ins. jQuery 1.7 or newer will work with DataTables, although typically you will want to use the latest version. DataTables includes everything else that it requires to operate.

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header ( thead ) and a single body ( tbody ). An optional footer ( tfoot ) can also be used.

If you are generating your HTML document using a server-side program, such as a PHP script, a Ruby script, a C# program or anything else — all they need to do is output your table like this. This is exactly what you would have for a normal HTML table, although sometimes you might need to add the thead and tbody tags, as these aren’t always used (they allow DataTables to know what should be used for the column headers and the click-to-order controls).

Note that DataTables can actually generate the thead and tbody for you, along with all of the rows and cells of the table, if you are using Ajax sourced data, but for the moment we’ll focus on plain HTML. For more information about the different data sources DataTables can use, please see the data sources section of this manual.

Please also note that while DataTables supports colspan and rowspan in the table’s header and footer, they are not supported in the table’s tbody and must not be present.

Installing Javascript / CSS

The key part of the installation of DataTables is including the DataTables source files on your page. As noted at the top of this page, this simply involves including the DataTables Javascript and CSS files. The CSS file is actually optional, but it provides default styling for your table to make it look good with minimum effort. See the style theme creator if you want to customise the colours of the default DataTables CSS.

The required files can be installed in a number of different ways:

• Using the DataTables CDN
• Locally
• With a package manager such as NPM or Bower.

Download builder

A download builder is available which will build a customised package for you — based on the features and styling you want for your DataTable. The resulting files are available on the DataTables CDN, or can be downloaded locally (see below).

A CDN is a Content Delivery Network which has edge servers that are tuned to provide media files with very low latency to web-browsers, and as a user receives a file from the CDN the browser will cache it for reuse. This means that different sites using the same Javascript library can share a large performance improvement since the browser does not need to download the same file from different servers for each site.

The DataTables CDN is powered by CloudFlare which has edge servers all around the world, ensuring that the Javascript and CSS for DataTables can be loaded as quickly as possible by your visitor’s browsers.

To include DataTables on your page simply include the following HTML (remember to include jQuery as well):

Local installation

If you prefer not to use a CDN, and instead have the files hosted on your own server, or if you want to modify the files at all, it is just as simple to get going with DataTables.

Simply use the download builder to download the latest version of DataTables, select any additionally software and styling you want and download the customised package. Then unzip and upload to your web-server. You will then have a directory called DataTables available on your server. Then include DataTables on your page using the following HTML:

DataTables and its extensions are available as NPM packages. The package base name is datatables.net and the extensions and styling integration options are available as individual packages — see the NPM install guide for full details on the available packages.

For example the following can be used to install DataTables and its default styling:

The DataTables packages all export a factory function that can be executed with two optional arguments — the window and jQuery object to use — again see the NPM install guide for details on these parameters. When using Browserify you can simply execute the function without any parameters — e.g.:

Bower

DataTables, its extensions and styling options are also available as Bower packages. The package names are identical to the NPM packages with datatables.net as the base name. To install DataTables and its default styling via bower use:

Initialising DataTables

That’s almost it! We’ve got the HTML table we want to enhance, and we’ve got all the software and styles we need. All that is now required is to tell DataTables to actually work its magic on the table. This is done with a few lines of Javascript:

Upgrade note:

If you are upgrading from DataTables 1.9 or earlier, you might notice that a capital D is used to initialise the DataTable here. $().DataTable() returns a DataTables API instance, while $().dataTable() will also initialise a DataTable, but returns a jQuery object.

Please refer to the API manual for further information.

If you’ve used jQuery before, you will recognise the form of this script: we wait for the document to be fully ready, and then select the table we want, and run the DataTables function on it.

That’s it! DataTables will add ordering, searching, paging and information to your table by default, giving your end users the ability to find the information they want as quickly as possible.

If you want to customise your DataTable, this can be done by specifying configuration parameters in an object passed to the DataTable() function. For information on how to use these configuration parameter, please refer to the options manual page.

Non-jQuery initialisation

If you prefer writing Javascript without using the abstractions jQuery provides, you can initialise DataTables (as of v1.11) using:

Where the parameters for new DataTable() are:

• A DOMString selector or HTML elements to pick the table(s) from the DOM.
• An object of DataTables options.

And the constructor will return a DataTables API instance allowing manipulation of the table.

Next steps

With the basics of how to get DataTables going under your belt, you might now want to explore some of the other options to enhance your tables further:

• Customise the DataTables options to suit your needs.
• Use the API to access and control the table programmatically.
• Style the table to match the theme of your web-site.
• Explore the DataTables examples.
• Take part in the DataTables community. Ask questions, answer others, make suggestions or simply say «Hi»!

Источник