标签: datatables

我使用了DataTable，我想将某个列加粗并将其放在中心。我怎么做 ？

现在这是我的设置：

  // Setting to Inventory Table 
  $('#inventory_exact').dataTable({

    "lengthMenu": [ 10 ] ,
    "bLengthChange": false,
    "searchHighlight": true,
    "bInfo" : false,
    "bRegex" : false,
    "bSmart" : false,
    "sSearch" :"^\\s*"+'1'+"\\s*$"


  });

这是现在的样子：

我从服务器得到的是一个父对象列表，每个父对象由零个或多个子对象组成。有点像下面这样

var data = [{
    "Id" : 1,
    "permissionValue" : 7,
    "child" : { //only one child object for simplicity
      "Id" :2,
      "permissionValue" : 7
    }
  }];

我想将此数据加载到 jQuery 数据表中。实现一个 rowCallback 函数（添加一些 CSS 类），如下所示：

tableOptions.rowCallBack = function(row,data,index){
    var api = this.api();
    api.rows.add(data.child).draw(); //not sure whether draw is necessary
  };
tableOptions.data = data;
that.dataTable = $("#dataTable").DataTable(tableOptions);

不出所料，只有父对象会加载。我明白这不是数据应该如何传递的方式。尽管如此，了解这种分层数据是否可以通过努力来显示仍然是件好事。

好吧，我的列中有一个DataTable是 a DateTime，它必须保持 aDateTime才能正确排序。问题是我无法像我需要的那样将其格式化为 MM/dd/yyyy 格式。下面是我的方法的代码，该方法格式化DateTable并创建一个新的格式化列，这是我遇到格式化问题的唯一列。它总是像这样回来01/15/2014 12:00:00 AM

private DataTable formatDataTable17(DataTable dt)
{
    DataTable dtNew = new DataTable();
    for (int i = 0; i < dt.Columns.Count; i++)
    {
        // Checks to see if the column name is date
        // if it is, then change the datatype of that
        // column to date time.
        if(dt.Columns[i].ColumnName.ToLower() == "date")
        {
            dtNew.Columns.Add(dt.Columns[i].ColumnName, typeof(DateTime));
        }
        else
        { 
            dtNew.Columns.Add(dt.Columns[i].ColumnName, typeof(String));
        }

    }        
    for (int i = 0; i …

我有数据表，它是表格内的渲染图像，但我所做的只是如果有图像然后渲染但如果没有图像还没有声明

这是我的数据表

<script type="text/javascript">
$(function() {
    $('#pengumuman-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: '{!! route('pengumuman.data') !!}',
        columns: [
            { data: 'rownum', name: 'rownum' },
            { data: 'gambar', render: function(data)
                { return '<img src="{{ asset("/images/pengumuman/") }}/'+data+'" atl img style="width:200px; height:150px"/>' }
            },
            { data: 'nama_pengumuman', name: 'nama_pengumuman' },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });
});
</script>

如果在 php 中的数据表中没有图像，我如何添加语句

@if(isset($pegawai->foto) && !empty($pegawai->foto))
  <div align="center"> 
  <img src="{{ asset("/images/karyawan/$pegawai->foto") }}" …

我的数据表有效，但是当我单击表的另一个页面时，它会将页面重定向到不存在的“未定义”页面。当我单击一个页码时，它会简要显示正确的结果，但随后它会被重定向到“未定义”页面。

查询

$('#branchtables').DataTable( {
     "pagingType": "full_numbers",
       "paging": true,

} );

HTML

<table id = "branchtables" class="table table-borderless table-data3">
    <thead>
        <tr>
            <th>Partner ID</th>
            <th>Partner Name</th>
            <th>Mobile Number</th>
            <th>Parent DSP</th>

        </tr>
    </thead>
    <tbody>
        <core:forEach var="data" items="${partners}" varStatus="count" >
            <tr id="removetable">

                <core:choose>
                <core:when test = "${data.parentid eq PID}">
                    <td id="removetable" class="tablefonts mytablewidth"><a href="managebranches?pid=${data.branchid}">${data.branchid}</a></td>
                </core:when>
                <core:otherwise>
                    <td id="removetable" class="tablefonts mytablewidth">${data.branchid}</td>
                </core:otherwise>
                </core:choose>

                <td id="removetable" class="tablefonts mytablewidth">${data.branchname}</td>
                <td id="removetable" class="tablefonts mytablewidth">${data.email}</td>
                <td id="removetable" class="tablefonts mytablewidth">${data.parentpartner}</td>

            </tr>
        </core:forEach>
    </tbody>
</table>

数据表链接

   <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>  
   <script …

这是加入代码并分配 Datatables

Route::get('Productos',function(){
  $query = DB::table('producto as e')
         ->select('e.cod_producto', 'e.nom_producto', 'e.precio_venta', 'd.nombre as nombre_marca', 'j.nombre as nombre_tipo', DB::raw('if(e.estado = 0,\'Activo\',\'Eliminado\') as estado'))
         ->join('marca as d','e.cod_marca', '=', 'd.cod_marca')
         ->join('tipo-producto as j', 'e.cod_tipo_producto', '=', 'j.cod_tipo_producto');

    return datatables()
              ->of($query)
              ->addColumn('btn','actions')
              ->rawColumns(['btn'])
              ->toJson();

});

这是jQuery代码

$(document).ready(function(){
    $('#Productos').DataTable({
      "bAutoWidth": false,
       "destroy": true,
       "responsive": true,
       "serverSide":true,
       "ajax":'{{url('api/Productos')}}',
       "columnDefs": [ {
         "targets": 'no-sort',
         "orderable": false,
         "searchable": false,
       }],
       "columns":[
         {data: 'cod_producto'},
         {data: 'nom_producto'},
         {data: 'precio_venta'},
         {data: 'nombre_marca'},
         {data: 'nombre_tipo'},
         {data: 'estado'},
         {data: 'btn'},
       ]
    });
});

现在，当我尝试搜索某些内容时，它向我发出错误警报 …

所以，一直在尝试在 reactjs 中使用数据表，我想在列中放置一个 onclick 但出现错误。

以下是我的代码：

const $ = require('jquery')
$.DataTable = require('datatables.net')
class Rmsdatatable extends Component {
    constructor(props) {
        super(props)
        this.handletableclick = this.handletableclick.bind(this)
    }
    handletableclick(event) {
        console.log(event)
    }
    componentDidUpdate() {
        console.log(this.props.data)
        this.$el = $(this.el)
        this.$el.DataTable(
            {
                data: this.props.data,
                scrollY: 520,
                paging: false,
                responsive: true,
                columns: [
                    {
                        data: "vfdSno",
                        render: function (data, type, row) {
                            return '<a onClick={' + this.handletableclick.bind(this, row) + '} >' + data + '</a>'
                        }
                    },
                    { data: "customerName" },
                    { data: "district" },
                    { …

我正在尝试使链接到另一个视图的 ID 的行值可点击。这是可以实现使用从jQuery的常规数据表中，如前端：<td><h6><a href="/users/{{ $user->id }}">{{ $user->id }}</a></h6></td>。但是我如何使用 yajra 做到这一点？出于某种原因，yajrabox.com 最终无法加载，所以我无法阅读他们的文档。我也找不到相关教程。这是我到目前为止所拥有的。

用户控制器：

public function index()
{        
    return view('users.index');
}

public function yajraDT()
{
    return Datatables::of(User::query())->make(true);
}

index.blade.php：

<div class="container">
<h2>Laravel DataTables Tutorial Example</h2>
    <table class="table table-bordered" id="tableDT">
        <thead>
            <tr>
                <th class="text-left">Id</th>
                <th class="text-left">First Name</th>
                <th class="text-left">Last Name</th>
                <th class="text-left">Email</th>
                <th class="text-left">Gender</th>
                @if(Auth::check() && Auth::user()->type == "Admin")
                <th class="text-left">Actions</th>
                @endif
            </tr>
        </thead>
    </table>

<script>
     $(function() {
           $('#tableDT').DataTable({
           processing: true,
           serverSide: true,
           ajax: '{{ url('users/yajraDT') }}',
           columns: [
                    { data: …

我正在使用 npm package material-datatable serverSide true 因为所有操作发生（搜索、排序、过滤...）将导致从服务器获取数据。

一切都很好，但内置搜索。我想禁用内置搜索功能，因为当表搜索事件触发时，它已经从服务器获取了搜索到的数据，并且表应该只显示它​​（我不想再次对此数据进行任何本地搜索）。但是经过一段时间的研究，我仍然找不到禁用内置搜索的方法。

有知道的请解释一下，谢谢。

我正在尝试实现一个 bootstrap 4 数据表，但似乎无法让它工作。在我的脑海中，我有所需的 CSS

    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">

然后我在下面有以下必需的脚本：

    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

然后我将脚本调用到我的标准格式 HTML 表中，正确的 ID 如下：

<script>
$(document).ready(function() {
    $('#myTable').DataTable();
} );
</script>

然而这些都不起作用，表格使用普通的 Bootstrap 4 表格显示，没有搜索/排序功能。谁能解释我在这里做错了什么？

谢谢

编辑：不幸的是，我尝试过它似乎破坏了整个站点的 CSS。我真正想做的只是显示我的 bootstrap 4 表的前 10 行，但每次我用谷歌搜索它时，它都会给出数据表的结果。有没有办法只显示标准引导程序 4 表的前 10 行？