datatables 相关问题

从ajax json填充数据表

我的桌子没有填充。我可以看到它正在获取正确的 JSON 收到的 JSON 数据如下所示： [ { “id”：“1”， “名称”：“FooBar”， “预测”：“0”， “点”：“1”， ...

如何使用DataTable和php？

我目前正在为我的网站构建一个基本的搜索实用程序。 但是我被困在 DataTables 和插入 php.ini 上。 目前，我有一个包含模拟数据（即标题和描述）的数组，并且在...

ajax-datatables-rails 如何使用 view_columns 将一个类关联两次

我将这个 gem 用于 Rails 中的数据表，并且在使用一个关联两次的模型时遇到问题 https://github.com/jbox-web/ajax-datatables-rails 这是我的模型 类助理 < ActiveReco...

DataTables 警告：表 id=DataTables_Table_0 - Ajax 错误 - Laravel

尝试使用我的 laravel 项目设置数据表时遇到错误。 DataTables 警告：表 id=DataTables_Table_0 - Ajax 错误。有关此错误的更多信息，请参阅http://

Winforms C# - 将 DataTable 解析为现有的 BufDataGridView 绑定源

我正在尝试编写代码来解析 CSV 的行并将它们导入到名为“Test”的现有 bufDataGridView 绑定源中，其中列已在绑定酸中命名...

jQuery 数据表列过滤器搜索不起作用

我正在开发 ASP.Net Core MVC C# 应用程序 (Visual Studio 2022)，它使用 jQuery 数据表。我正在使用 ajax 调用从数据库加载数据。数据表中的每个列标题上都有一个过滤器

Datatables.js 搜索两列 - 筛选后按钮停止工作 - 如何维护事件监听器？

我在 ASP.NET Core 项目中使用 DataTables.js 来显示计算机列表并允许用户过滤数据。每行都有一个按钮，单击该按钮可切换附加详细信息的显示...

Datatables.js - 按钮在过滤后停止工作 - 如何维护事件监听器？

我在 ASP.NET Core 项目中使用 DataTables.js 来显示计算机列表并允许用户过滤数据。每行都有一个按钮，单击该按钮可切换附加详细信息的显示...

我如何将选中的行发送到数据表的第一行

此代码实际上可以添加行，但是当我检查主要联系人时，它没有发送到第一行，而是发送到最后一行，请帮助我解决此问题。 //添加联系人行 $(做...

如何将 Intl 组件与建表器一起使用？

嘿我在 Symfony 4.3 中使用 ominis/datatables 包。 我存储在我的数据库中来自国际的国家/地区代码。 当我使用表构建器时如何使用 Intl::getRegionBundle()->getCountryName($value) 。我的代码是...

如何在 ASP.NET Core MVC 中的按钮单击事件上显示 jQuery Datatable 上的数据

我是在 ASP.NET Core 6 MVC 中使用 AJAX 的 jQuery 数据表新手。我已将我的代码包含在视图和控制器中。我正在尝试从控制器获取数据并将其显示在 v...

使用 R 中的 DataTables DT 制作一个更美观的下拉过滤器标签

我正在尝试为闪亮的仪表板制作一个数据表，该仪表板将在列上有一个下拉过滤器。我实际上可以使用它，但外观我称之为低于标准。 这是我的简单例子

数据表服务器端处理和列别名

在使用服务器端处理的数据表中，指定列时是否可以使用列别名？ 目前这适用于： $aColumns = array( '日期时间','用户名', 'user_ip', '

在 DT 表按钮中包含图标（按钮扩展）

我想在 DT 表的按钮中添加一些图标。我的意思是用“按钮”扩展创建的按钮。 库（DT） 数据 <- iris dtable <- datatable( dat, rownames = TRUE,...

过滤器菜单不适用于 jQuery DataTable

我使用ajax方法将数据动态加载到jQuery数据表中。单击数据表列标题中的过滤器图标时，过滤器菜单会下拉，并且始终显示“unde...

JQuery 数据表 - 列排序在

我正在开发 ASP.NET Core MVC 应用程序并在我的应用程序中使用 JQuery Datatable。 单击列标题中的排序按钮时，我的数据表未排序。我的数据表如下所示： 我正在开发 ASP.NET Core MVC 应用程序并在我的应用程序中使用 JQuery Datatable。 单击列标题中的排序按钮时，我的数据表未排序。我的数据表如下所示： <table class="table display table-bordered" id="DATATABLE"> </table> <script>标签内： $("#DATATABLE").DataTable({ serverSide: true, filter: true, searchDelay: 1000, scrollY: StaticData.TABLE_HEIGHT + 'px', lengthMenu: StaticData.TABLE_PAGE_SIZE, language: { searchPlaceholder: "Name, Teacher" }, scrollCollapse: true, ajax: { url: '/STUD_MANAGEMENT/LoadStud', type: 'GET', datatype: 'json', headers: { 'RequestVerificationToken': 'your json token' }, data: (d) => { return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir } }, beforeSend: () => { ShowLoader(); }, complete: () => { HideLoader(); }, dataSrc: (json) => { json = json.data; return json; } }, columnDefs: [{ className: "dt-center", targets: [5, 6, 7, 8, 11], width: '2%', }], columns: [ { data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible: false }, { data: 'CLASS_ID', title: 'CLASS ID', autoWidth: false, visible: false }, { data: 'NAME', title: 'Name', autoWidth: true, searchable: true }, { data: 'AGE', title: 'Age', autoWidth: true }, { data: 'TEACHER', title: 'Teacher', autoWidth: true }, ] }); 控制器中的LoadStud方法如下所示： public IActionResult LoadStud(int draw = 1, int start = 0, int length = 10, string search = "", string FilterByColumn = "", string ASC_DSEC = "") { List<STUD_MANAGEMENT> ListData = new List<STUD_MANAGEMENT>(); int recordsTotal = 0; STUD_MANAGEMENT dm = new STUD_MANAGEMENT(); dm.STUD_ID = 1; dm.CLASS_ID = 1; dm.NAME = "James"; dm.TEACHER = "SEPHORA"; dm.AGE = "12"; STUD_MANAGEMENT dm1 = new STUD_MANAGEMENT(); dm1.STUD_ID = 2; dm1.CLASS_ID = 2; dm1.NAME = "Naneem"; dm1.TEACHER = "Chithra"; dm1.AGE = "15"; STUD_MANAGEMENT dm11 = new STUD_MANAGEMENT(); dm11.STUD_ID = 3; dm11.CLASS_ID = 3; dm11.NAME = "Sony"; dm11.TEACHER = "Mano USA"; dm11.AGE = "3"; ListData.Add(dm); ListData.Add(dm1); ListData.Add(dm11); recordsTotal = ListData.Count(); var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = ListData }; return Ok(jsonData); } STUD_MANAGEMENT类如下所示： public class STUD_MANAGEMENT { public int STUD_ID { get; set; } public int CLASS_ID { get; set; } public string NAME { get; set; } public int AGE { get; set; } public string TEACHER { get; set; } } 来自服务器端处理： 启用服务器端处理后，DataTables 执行的所有分页、搜索、排序操作都将移交给服务器，其中 SQL 引擎（或类似引擎）可以对大型数据集执行这些操作 它提到后端负责执行这些操作。 您当前的实现未涵盖订购。 一个简单的方法是，您需要根据 FilterByColumn 和 ASC_DSEC 进行检查，通过相应的排序顺序来对属性值进行排序。 if (!String.IsNullOrEmpty(FilterByColumn)) { ASC_DSEC = ASC_DSEC.ToUpper(); ASC_DSEC = ASC_DSEC == "ASC" || ASC_DSEC == "DESC" ? ASC_DSEC : "ASC"; switch (FilterByColumn.ToUpper()) { case "STUD_ID": ListData = ASC_DSEC == "ASC" ? ListData.OrderBy(x => x.STUD_ID).ToList() : ListData.OrderByDescending(x => x.STUD_ID).ToList(); break; case "CLASS_ID": ListData = ASC_DSEC == "ASC" ? ListData.OrderBy(x => x.CLASS_ID).ToList() : ListData.OrderByDescending(x => x.CLASS_ID).ToList(); break; case "NAME": ListData = ASC_DSEC == "ASC" ? ListData.OrderBy(x => x.NAME).ToList() : ListData.OrderByDescending(x => x.NAME).ToList(); break; case "AGE": ListData = ASC_DSEC == "ASC" ? ListData.OrderBy(x => x.AGE).ToList() : ListData.OrderByDescending(x => x.AGE).ToList(); break; case "TEACHER": ListData = ASC_DSEC == "ASC" ? ListData.OrderBy(x => x.TEACHER).ToList() : ListData.OrderByDescending(x => x.TEACHER).ToList(); break; } } var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = ListData }; 但是，考虑到可扩展性和可维护性，这不是一个好方法，例如将来您可能会添加新属性、更改属性名称或删除属性。 如果您正在寻找高级方法，请使用 System.Reflection。 using System; using System.Collections.Generic; using System.Reflection; using System.Linq; if (!String.IsNullOrEmpty(FilterByColumn)) { PropertyInfo propInfo = typeof(STUD_MANAGEMENT).GetProperty(FilterByColumn, BindingFlags.Public | BindingFlags.Instance); if (propInfo != null) { switch (ASC_DSEC.ToUpper()) { case "ASC": ListData = ListData.OrderBy(x => propInfo.GetValue(x, null)).ToList(); break; case "DESC": ListData = ListData.OrderByDescending(x => propInfo.GetValue(x, null)).ToList(); break; } } } var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = ListData };

列排序在 JQuery 数据表中不起作用

我正在开发 ASP.Net Core MVC 应用程序，并且在我的应用程序中使用 JQuery Datatable。 单击列标题中的排序按钮时，我的数据表未排序。我的数据表如下所示：...

如何添加选择下拉过滤器

问题或功能请求摘要 我正在尝试添加 3 个过滤器（状态、发件人、收件人）。如何使用 Yajra\DataTables\Services\DataTable 类来做到这一点？ 问题的代码片段 问题或功能请求摘要 我正在尝试添加 3 个过滤器（状态、发件人、收件人）。我如何使用 Yajra\DataTables\Services\DataTable 类来做到这一点？ 问题代码片段 <?php namespace App\DataTables\Payments; use App\Models\Order; use App\Models\Payment; use Yajra\DataTables\Html\Button; use Yajra\DataTables\Html\Column; use Yajra\DataTables\Services\DataTable; class BankTransferDataTable extends DataTable { protected $exportColumns = [ 'id', 'order_id', 'order_number', 'invoice_number', 'bulk_order_key', 'add_on', 'email', 'mobile_number', 'g_bank', 'bank_name', 'account_name', 'account_number', 'payment_date', 'amount', 'deposit_slip', 'status', 'transaction_id', 'created_at', 'updated_at', 'phone', 'order_status', 'order_total' ]; public function dataTable($query) { return datatables() ->eloquent($query) // ->filter(function ($query) { // if (request()->has('search')) { // $query->where(function($query) { // $query->where('categories.name', 'LIKE', '%' . request('search')['value'] . '%') // ->orWhere('categories.slug', 'LIKE', '%' . request('search')['value'] . '%'); // }); // } // }) ->addColumn('Order #', function ($payment) { return $payment->bulk_order_key; }) ->addColumn('Gifted Account', function ($payment) { return $payment->g_bank; }) ->addColumn('Bank Name', function ($payment) { return $payment->bank_name; }) ->addColumn('Account Name', function ($payment) { return $payment->account_name; }) ->addColumn('Status', function ($payment) { if ($payment->transaction_id) { return $payment->get_wallet_transaction_status(); } else if($payment->bulk_order_key) { $orderStatus = Order::select(['status']) ->where('bulk_order_key', $payment->bulk_order_key) ->first(); if ($orderStatus) { return $orderStatus->status; } } return $payment->order_status; }); // ->addColumn('Actions', function ($category) { // return view('backend.catalog.categories.action', compact('category')); // }); } /** * Get query source of dataTable. * * @param \App\Payment $model * @return \Illuminate\Database\Eloquent\Builder */ public function query(Payment $model) { $filters = request()->has('search.value') && filled(request('search.value')) ? json_decode(request('search.value'), true)['filters'] : []; return $model->newQuery() ->selectRaw('payments.*, orders.phone, orders.status as order_status, orders.total as order_total') ->leftJoin('orders', 'payments.order_id', '=', 'orders.id') ->whereRaw('payments.bulk_order_key <> ""'); if (filled($filters['status'])) { $query->where('payments.status', $filters['status']); } $query->when((request()->has('from') && request()->has('to')), function ($query) { $query->whereDate('payments.created_at', '>=', request()->get('from')); $query->whereDate('payments.created_at', '<=', request()->get('to')); }) ->when((request()->has('from')), function ($query) { $query->whereDate('payments.created_at', '>=', request()->get('from')); $query->whereDate('payments.created_at', '<=', date('Y-m-d', strtotime('today'))); }) ->when((request()->has('to')), function ($query) { $query->whereDate('payments.created_at', '>=', date('Y-m-d', strtotime('-5 years'))); $query->whereDate('payments.created_at', '<=', request()->get('to')); }) ->orderBy('payments.created_at', 'desc'); } /** * Optional method if you want to use html builder. * * @return \Yajra\DataTables\Html\Builder */ public function html() { return $this->builder() ->setTableId('bankTransferPaymentsTable') ->columns($this->getColumns()) ->minifiedAjax() ->dom('Brtip') ->orderBy(1) ->buttons( Button::make('export')->buttons(['csv']), Button::make('reset') ->text('<span><i class="fa fa-undo"></i> Refresh</span>'), ); } /** * Get columns. * * @return array */ protected function getColumns() { return [ Column::make('Order #'), Column::make('Gifted Account'), Column::make('Bank Name'), Column::make('Status'), // Column::make('Actions') ]; } /** * Get filename for export. * * @return string */ protected function filename() { return 'bank_transfer_payments_report_' . date('YmdHis'); } } 还有风景： {{ $dataTable->scripts() }} <script> $(function () { const filter = () => { const filters = { filters: { status: $('#filterStatus').val() } }; // window.LaravelDataTables["bankTransferPaymentsTable"].destroy(); window.LaravelDataTables["bankTransferPaymentsTable"].search(JSON.stringify(filters)).draw(); $('#bankTransferPaymentsTable').DataTable().ajax.reload(); }; $(document).on('change', '#filterStatus', function() { filter(); }); }); </script> 过滤截图 问题 从下拉列表中选择状态时，表数据不会刷新/重新加载。我也没有从控制台得到任何输出。 系统详情 操作系统：MacOS PHP 版本：8.1 Laravel 版本：8.83.27 Laravel-数据表版本：9.11 似乎您的代码中有一个 return 语句阻止您的代码（在返回之后）被执行： public function query(Payment $model) { $filters = request()->has('search.value') && filled(request('search.value')) ? json_decode(request('search.value'), true)['filters'] : []; return $model->newQuery() //Change this here and it should be solved :) ->selectRaw('payments.*, orders.phone, orders.status as order_status, orders.total as order_total') ->leftJoin('orders', 'payments.order_id', '=', 'orders.id') ->whereRaw('payments.bulk_order_key <> ""'); //... rest of code }

DataTables.net 中分页、长度更改和信息控件的定位

我想定位分页、长度更改和信息控件，如下所示： 并有以下代码： "dom": '<"top"f>rt<"bottom"pli>' 不过，我是

Angular 数据表无法正确过滤数据

我有一个来自 API 的预订数据列表，我需要添加两个按钮来过滤数据表的数据，一个按钮用于仅显示 check_in_date 与 toda 相同的预订...