- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个使用 Twitter Bootstrap 3 设计的数据表并使用了一些按钮。这是它被初始化的代码:
bookingsTable = $('#bookings-table').DataTable({
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
},
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'excel',
className: "btn-sm",
text: 'Esporta',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
},
{
extend: 'colvis',
className: "btn-sm",
text: 'Colonne'
},
'refresh'
],
scrollY: 500,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true
});
如您所见,按钮居中位于 dataTables_length
和 dataTables_filter
包装器之间,它们分别包装当前显示的行数和输入搜索。
只要宽度大于 768px,一切都按预期工作。在下方时,三个 col-sm-4
列正确地分别位于它们自己的行中,但是,而 dataTables_length
和 dataTables_filter
是居中,按钮的包装是左对齐的,这没有多大意义,因为它有 text-center
类应该保持居中对齐。
缩小表:
我想我在这里遗漏了一些东西,但是我无法找出问题所在。
Here是一个 JSFiddle 示例。
最佳答案
更新:修复了这里的问题:https://jsfiddle.net/phgw8kbx/11/div 'dt-buttons btn-group' 使用 100% 宽度,这应该是自动的,或者您需要使元素内联 block 居中对齐。只需在某处添加此 css 即可正常工作。
$(function() {
$.fn.dataTable.ext.buttons.refresh = {
text: 'Aggiorna',
className: 'btn-sm',
action: function (e, dt, node, config) {
}
};
bookingsTable = $('#bookings-table').DataTable({
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
},
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'excel',
className: "btn-sm",
text: 'Esporta',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
},
{
extend: 'colvis',
className: "btn-sm",
text: 'Colonne'
},
'refresh'
],
scrollY: 500,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../favicon.ico"> //TODO: set custom favicon-->
<title>Gestione avanzata</title>
<!-- Font Awesome v4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Twitter Bootstrap v3.3.7 core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Bootstrap DataTables CSS v1.10.16 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<!-- DataTables Bootstrap Buttons CSS v1.5.1 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap.min.css"/>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/bookings_manager.css" />
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12">
<h2 class="text-center">Storico prenotazioni</h2>
<!-- Vehicles' table -->
<div class="">
<table id="bookings-table" class="table table-bordered table-striped text-center" cellspacing="0" width="100%">
<thead>
<tr>
<td><strong>ID prenotazione</strong></td>
<td><strong>Veicolo</strong></td>
<td><strong>Impiegato</strong></td>
<td><strong>Centro</strong></td>
<td><strong>Data</strong></td>
<td><strong>Partenza da</strong></td>
<td><strong>Ora di partenza</strong></td>
<td><strong>Tragitto intermedio</strong></td>
<td><strong>Ritorno a</strong></td>
<td><strong>Ora di ritorno</strong></td>
<td><strong>Servizio</strong></td>
<td><strong>Motivazione</strong></td>
<td><strong>Stato</strong></td>
<td><strong>Storia</strong></td>
<td><strong>Opzioni</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal to show the history of a booking -->
<div class="modal fade" id="booking-history-modal" tabindex="-1" role="dialog" aria-labelledby="booking-history-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="booking-history-modal-label">Storico prenotazione</h4>
</div>
<div class="modal-body">
<table id="booking-history-table" class="table table-bordered table-striped text-center" cellspacing="0" width="100%">
<thead>
<tr>
<td><strong>Impiegato</strong></td>
<td><strong>Azione</strong></td>
<td><strong>Motivazione</strong></td>
<td><strong>Data e ora</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal to permanently delete a booking -->
<div class="modal fade" id="booking-delete-modal" tabindex="-1" role="dialog" aria-labelledby="booking-delete-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="booking-delete-modal-label">Elimina prenotazione</h4>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare in maniera definitiva questa prenotazione?
Essa verrà eliminata dal database, e non sarà più possibile recuperarla. Verrà eliminata anche dallo storico delle prenotazioni.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="confirm-delete-booking-button">
<span class="fa fa-trash fa-fw" aria-hidden="true"></span>
Elimina
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal to give information about the last action (error/success) -->
<div class="modal fade" id="action-info-modal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="action-info-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="closeIcon" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="action-info-modal-label"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="refresh-page-button">
<span class="fa fa-refresh fa-fw" aria-hidden="true"></span>
Aggiorna la pagina
</button>
<button type="button" class="btn btn-warning" id="report-error-button">
<span class="fa fa-bug fa-fw" aria-hidden="true"></span>
Segnala errore
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- DataTables JSzip v2.5.0 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<!-- Datatables Core JS v1.10.16 -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap DataTables Core JS v1.10.16 -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<!-- DataTables Bootstrap Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap.min.js"></script>
<!-- DataTables HTML5 Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<!-- DataTables Column Visbility Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<!-- Datatables fixedColumns JS v3.2.4 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css"/>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
</body>
</html>
div.dt-buttons {
width: auto !important;
}
关于css - DataTables 按钮不在窄屏幕上居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49516213/
所以我有这个 javascript 片段,它有两个按钮可以进入全屏,一个按钮可以退出全屏。我想做到这一点,如果我不在全屏模式下,按钮会显示转到全屏模式,而当我处于全屏模式时,按钮会显示退出全屏模式..
我在自定义控件中添加了一个新属性作为可扩展属性,例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后,我在属性网格中看到一个省略号 (…) 按钮,如字体属性的“…”按钮
我在自定义控件中添加了一个新属性作为可扩展属性,例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后,我在属性网格中看到一个省略号 (…) 按钮,如字体属性的“…”按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而,每当按下按钮时,我都会收到此 Jav
我试图在我的文本区域中获取一个按钮值,如果我使用 则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗? HTML 1 2 3 4 JavaScript $(document).read
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
我有一个表单,其中过滤器下方有按钮(应用过滤器和清除过滤器),我试图在单击“应用”按钮时显示“清除”,并在单击“清除”按钮时隐藏“清除”按钮。 下面的代码(如果我的表有的话):
excel 按钮正在工作,但是当我添加 pdf 按钮时,它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
我想创建一个 div 作为标题并分成 3 列,并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
仅当选中所有框时才应禁用“允许”按钮。我该怎么做?我已经完成了 HTML 部分,如下所示。如何执行其中的逻辑部分?即使未选中一个复选框,也应禁用“允许”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
如您所知,您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素 或 如果您需要内容,请使用 元素(不是空元素)。 在JSF2中,有2种方式生成按钮;与UICommand或 UIOu
我尝试根据表单元素的更改禁用/启用保存按钮。但是,当通过弹出按钮选择更改隐藏输入字段值时,保存按钮不受影响。 下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
我的 Android 应用程序中有一堆 EditText,每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘,而是使用软件键盘输入数字。 Android 将输
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
我已经看到这在其他类型的对话框窗口中是可能的,例如“showConfirmDialog”,其中可以指定按钮的数量及其名称;但是使用“showInputDialog”时是否可以实现相同的功能?我似乎无法
相同的按钮用于激活和停用。第一次,当代码运行按钮单击并成功“停用”时。但第二次,代码无法找到该元素。第一个案例按钮位于第二个“a”标签中,然后停用第一个“a”标签中的按钮。 案例1: Edit
是否可以将按钮的 onclick 操作设置为 JavaScript 变量?这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时,我们就会更新一个 JavaScript 变量。该 v
我想创建一个按钮,它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点? 我发现我可以制作自己的 View extends Button,但是如果可以的话我应该如何实现 onDraw
我是一名优秀的程序员,十分优秀!