标签: datatables

我正在使用 jquery-datatable 并希望向选择框和搜索框添加背景颜色。所以它看起来像标题具有相同的背景颜色。

$(document).ready(function(){
  $('#users').DataTable();
})

如何将属性传递给数据表以更改选择框和搜索框的背景颜色？

我有个问题。使用datatables时，我想在页面更改时滚动表格顶部。

我添加了以下代码

$('#tableId').on( 'page.dt', function () {
    $('html, body').animate({
        scrollTop: 0
    }, 200);        
});

（目前它滚动到页面顶部）但它并不能完全工作。

当我单击其他页面时，页面会滚动到顶部，但在加载数据后，它会再次向下滚动。我不知道发生了什么（我不是 JavaScript 专家），但似乎 Datatables 在加载数据后运行额外的操作，再次滚动到底部。有什么方法可以防止数据表（可能）在加载数据后向下滚动？

我可以使用draw.dt代替page.dt，它会工作得很好，但会引起其他副作用。如果表格放置在页面上的某个位置，则在加载数据后，它将滚动到页面顶部（或表格顶部），我想仅在更改页面后运行此操作。

使用 jQuery DataTables，我使用下面的代码来突出显示选定的行：

 var table = $('#example1').DataTable();        
 $('#example1 tbody').on('click', 'tr', function()
 {
   if($(this).hasClass('selected')){
     $(this).removeClass('selected');
   }
   else{
     table.$('tr.selected').removeClass('selected');
     $(this).addClass('selected');
   }
 });

我还在页面顶部有这个页内 CSS 类：

 <style>
   tr.selected {background-color: #a6a6a6;}
 </style>

上述所有内容都相应地起作用。我可以单击该行的任意位置，该行将突出显示。

然而，我遇到了一个问题。在每一行中，都有一些链接，用户可以单击这些链接来打开模式窗口。如果用户直接单击链接，模式将打开并且该行确实会突出显示。

如果用户首先单击该行，然后在同一行中单击链接以打开窗口，则会出现问题...现在该行不再突出显示。

我需要做的是无论他们单击同一行多少次，都将突出显示在该行上 - 直到他们单击不同的行。

我如何调整上面的 jQuery 来实现这一点？

我正在使用 laravel 数据表包，一切正常。我在关系列搜索方面遇到问题。让我详细说明一下：我有两个表：
ed_class （主表）
ed_section（辅助表）

这是上表的结果以及它们之间的关系。

主要数据来自 ed_section 表，通过建立关系，我从 ed_class 表获取类名称。由于数据来自 ed_section 表，因此数据表列搜索在节名称列上工作正常，但在类名称列上不起作用，那么如何在类名称列上实现搜索。

数据表js代码如下：

$(function() {
    $('#table').DataTable({
        "pageLength": 25,
         "ordering": false,
        //"columnDefs": [{
        //"targets": 7,
        //"orderable": false
        //}],
        processing: true,
        serverSide: true,
        ajax: '{!! url('sections/data') !!}',
        columns: [
            { data: 'sr_no', name: 'sr_no' },
            { data: 'classid', name: 'classid' },
            { data: 'sectiontitle', name: 'sectiontitle' },
            { data: 'Option', name: 'Option' }
        ]
    });
});

这是服务器端代码（使用 laravel datatable 包）：

public function data(){

    $model = Section::all();
    $data =  Datatables::of($model);
    $data …

我在数据表中遇到问题。为什么我得到一个“显示 0 到 0 个条目”，也无法搜索，它总是显示“没有可用数据”并且分页被禁用。我应该怎么办？

这是我的代码：

//Show Products Table
function show_products() {
    var action = "Show Products";
    $.ajax ({
        type: 'POST',
        url: '../admin/class.php',
        data: {action: action},
        success: function(data) {
            //if success it will display the data
            $('#show_products').html(data);
        }
    });
}

//class.php(data)
if(isset($_POST['action']) && !empty($_POST['action'])) {
    $action = $_POST['action'];
    switch($action) {
        case 'Show Products': 
            //call the function show_products();
            show_products();
        break;
    }
}

//Function to fetch the all products
function show_products() {
    GLOBAL $db_conn;
    $search_query="SELECT p.product_id as productID, p.*, pe.* FROM tblproduct …

我有一个简单的闪亮应用程序，它以闪亮的方式向我显示数据表中的大量图片。我有 20,000 张图像，我想删除那些我不喜欢的图像。当我删除一行时，应用程序会将我带到数据表的顶部，这对于这么多图像没有用处。

作为一种简单的解决方案，我认为我可以确保应用程序返回到我刚刚删除的图像上方。我想这将由 javascript 函数管理，但我不知道如何实现它。我想它应该放在下面的代码部分中tags$script。有人可以告诉我如何/指导我如何实现此功能

这是我的应用程序的代码：

服务器

library(shiny)
library(shinydashboard)
library(data.table)
library(DT)
server<-shinyServer(function(input, output) {
  vals<-reactiveValues(myTabData = data.table(NULL))

  vals$Data<-data.table(Endo_Endoscopist=DT$Endo_Endoscopist,
                        PatientID=DT$PatientID,
                        NBIorWLorFICE=DT$NBIorWLorFICE,
                        url=DT$url)

  output$MainBody<-renderUI({
    fluidPage(
      box(width=12,
          h3(strong("Actions on datatable with buttons"),align="center"),
          hr(),
          column(12,dataTableOutput("Main_table")),
          tags$script("$(document).on('click', '#Main_table button', function () {
                      Shiny.onInputChange('lastClickId',this.id);
                      Shiny.onInputChange('lastClick', Math.random())
  });")

      )
      )
  })

  output$Main_table<-renderDataTable({
    DT=vals$Data

    DT[["Actions"]]<-
      paste0('
             <div class="btn-group" role="group" aria-label="Basic example">
             <button type="button" class="btn btn-secondary delete" id=delete_',1:nrow(vals$Data),'>Delete</button>
             <button type="button" class="btn btn-secondary modify"id=modify_',1:nrow(vals$Data),'>Modify</button>
             </div>

             ')
    datatable(DT,
              escape=F)}
      )


  output$downloadData <- downloadHandler(
    filename = function() {
      "Main_table.csv" …

我已将侧边栏添加到表格所在的视图之一。我正在为该表使用数据表插件。

侧边栏可以切换或隐藏。当我隐藏侧边栏时出现问题。表体可以正确调整大小，但表头却不能。我可以通过单击它来调整标题。通过调整大小，我的意思是我width像这样改变父级：

.page-wrapper.toggled .page-content .tasks-list {
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width: calc(100% - 300px);
    }

我在下面提供代码片段。您需要进入全页模式才能看到我的问题。

我读到该columns.adjust()功能可能有帮助，但事实并非如此。我不知道如何解决它。

如何调整表头大小或调整其tbody宽度？

.page-wrapper.toggled .page-content .tasks-list {
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width: calc(100% - 300px);
    }

$(document).ready(function () {

            var table = $('#testtable').DataTable({
                scrollY: 500,
                searching:false,
                paging:false
                //fixedHeader: {
                //    header: true,
                //    headerOffset: 230
                //}
            });

            $("#close-sidebar").click(function () {
                $(".page-wrapper").removeClass("toggled");
                //table.columns.adjust(); have tried this but does not work  
            }); …

我有一个数据表，带有导出到 Excel 按钮，我正在尝试自定义。我环顾四周，看看如何定制，发现了一些，但仍然有问题。

当您导出到 Excel 时，第一行似乎是页面标题。我正在尝试将这一行加粗；如果可能的话，用页面标题以外的其他内容替换文本。

这是我看到并尝试修改以实现我需要的内容：

buttons: [
{
    extend: 'excelHtml5',
    customize: function ( xlsx ){
        var sheet = xlsx.xl.worksheets['sheet1.xml'];

        // jQuery selector to add a border
        //$('row c[r*="0"]', sheet).attr( 's', '25' );
        //$('row c[r^="C"]', sheet).attr( 's', '2' ); // third column is bold

        // Trying to make first row bold, this makes last row bold
        $('row c[r*="0"]', sheet).attr( 's', '2' );
        $(sheet.body)
            .css('font-size', '10pt');

        $(sheet.body).find('table')
            .addClass('compact')
            .css('font-size', 'inherit');
    },
    exportOptions: {
        columns: [0, 1, 2]
    },
},

另外，在应用格式时，我们似乎将“attr”与第一个参数“s”和一个数字一起使用。我如何知道 …

我想按升序和降序对表进行排序。基本上，当我单击 fa-sort-asc 时，它应该突出显示，而 fa-sort-desc 应该显示为灰色，反之亦然。请帮助我如何在 Bootstrap 4 中实现这一点。有一些示例，但是当 ASC 排序完成时，向下箭头丢失了。

我也尝试过使用数据表，但没有运气。请帮助我需要添加什么才能使用颜色突出显示进行排序

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
  <script src="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
  </script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
  </script>
  <script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
  </script>
</head>
<body>
  <div class="container">
    <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th class="th-sm">ID
          </th>
          <th class="th-sm">Age
          </th>
          <th class="th-sm">Name
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>5</td>
          <td>19</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>20</td>
          <td>23</td>
          <td>San Franisco</td>
        </tr>
        <tr>
          <td>7</td>
          <td>28</td>
          <td>London</td>
        </tr> …

问题：我需要在现金页面中使用“产品数据表”，其中“现金数据表”已存在于该页面上。

我已经搜索过这个问题，但令我惊讶的是之前没有人问过这个问题，所以当我找到这个问题的解决方案时，我决定与其他程序员分享我的解决方案。我希望它对你有用。

首先让我说一下我工作的版本。

• “laravel/框架”：“^8.40”
• "yajra/laravel-datatables-buttons": "^4.0",
• "yajra/laravel-datatables-html": "^4.0",
• “yajra/laravel-datatables-oracle”：“~9.0”

现在我展示我的项目结构

我有路线：列表

 GET|HEAD | cash | cash.index| App\Http\Controllers\CashController@index
 GET|HEAD | product | product.index| App\Http\Controllers\ProductController@index

CashController.php

public function index(CashDataTable $cashDataTable)
{

    return $cashDataTable->render('cash.index');
}

Cash.index.blade.php

{!! $dataTableCash->table(['id'=>'dataTable']) !!}
{!! $dataTableCash->scripts() !!}

CashDataTable.php

使用App\Models\Cash；

class CashDataTable extends DataTable

    public function dataTable($query)
    {
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'cash.datatables_actions');
    }
    
    public function html()
    {
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ...
    }
    ...
}

产品数据表.php

use App\Models\Product;

class ProductDataTable extends DataTable

    public function dataTable($query)
    { …