标签: datatables

如何重新加载/刷新jQuery dataTable?

我正在尝试实现功能,通过单击屏幕上的按钮将导致我的jQuery dataTable刷新(因为自创建dataTable以来服务器端数据源可能已更改).

这就是我所拥有的:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});
Run Code Online (Sandbox Code Playgroud)

但是当我运行它时,它什么也没做.单击按钮时刷新dataTable的正确方法是什么?提前致谢!

javascript jquery datatables

74
推荐指数
9
解决办法
40万
查看次数

jQuery DataTables:延迟搜索,直到键入3个字符或单击一个按钮

只有在输入3个字符后才能选择开始搜索吗?

我已经为显示20,000个条目的同事编写了一个PHP脚本,他们抱怨说,在输入单词时,前几个字母会导致所有内容冻结.

另一种方法是通过单击按钮而不是通过字符输入来启动搜索.

以下是我目前的代码:

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "aoColumns": [
                /* qdatetime */   { "bSearchable": false },
                /* id */          null,
                /* name */        null,
                /* category */    null,
                /* appsversion */ null,
                /* osversion */   null,
                /* details */     { "bVisible": false },
                /* devinfo */     { "bVisible": false, "bSortable": false }
        ],
        "oLanguage": {
                "sProcessing":   "Wait please...",
                "sZeroRecords":  "No ids found.",
                "sInfo":         "Ids from _START_ to _END_ of _TOTAL_ total",
                "sInfoEmpty":    "Ids from 0 …
Run Code Online (Sandbox Code Playgroud)

jquery datatables

73
推荐指数
9
解决办法
7万
查看次数

使用jQuery DataTables时禁用对最后一列的排序

我在项目中使用jQuery DataTables,我想知道如何禁用最后一列的排序.我想在整个网站上实施.

现在我有以下代码:

<!-- jQuery DataTable -->
    <script src="../assets/js/plugins/dataTables/jquery.datatables.min.js"></script>
    <script>
        /* Default class modification */
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

        /* API method to get paging information */
        $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
        {
            return {
                "iStart":         oSettings._iDisplayStart,
                "iEnd":           oSettings.fnDisplayEnd(),
                "iLength":        oSettings._iDisplayLength,
                "iTotal":         oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
            };
        }

        /* Bootstrap style pagination control */
        $.extend( $.fn.dataTableExt.oPagination, {
            "bootstrap": {
                "fnInit": function( oSettings, nPaging, fnDraw …
Run Code Online (Sandbox Code Playgroud)

javascript jquery datatables

70
推荐指数
8
解决办法
10万
查看次数

如何在Datatables中显示空数据消息

假设我有时从服务器获取空数据,我想在DataTables中显示No Data found消息?这怎么可能?

asp.net-mvc jquery json datatables

70
推荐指数
2
解决办法
9万
查看次数

使用jQuery DataTables时,禁用第一列的自动排序

我正在使用jQuery DataTables,我想知道是否可以在表的第一列禁用自动排序?

我的代码看起来像这样:

        /* Default class modification */
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

        /* API method to get paging information */
        $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
        {
            return {
                "iStart":         oSettings._iDisplayStart,
                "iEnd":           oSettings.fnDisplayEnd(),
                "iLength":        oSettings._iDisplayLength,
                "iTotal":         oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
            };
        }

        /* Bootstrap style pagination control */
        $.extend( $.fn.dataTableExt.oPagination, {
            "bootstrap": {
                "fnInit": function( oSettings, nPaging, fnDraw ) {
                    var oLang = oSettings.oLanguage.oPaginate;
                    var …
Run Code Online (Sandbox Code Playgroud)

sorting jquery datatables

66
推荐指数
3
解决办法
8万
查看次数

TypeError:$(...).DataTable不是函数

我正试图通过链接使用jQuery的Datatable JS来处理我的项目.

我从同一个源下载了完整的库.包中给出的所有示例似乎都运行正常,但是当我尝试将它们合并到我WebForms的CSS中时,JS根本不起作用.

这是我做的:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
               <!-- table body -->
            </tbody>
        </table>
    </div>
    <script src="js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
    </form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我的解决方案中JS和CSS的文件结构如下所示:

解决方案中JS和CSS的文件结构

我已经添加了所有必要的JS和CSS引用,如手册中所示.渲染仍然不如预期.没有CSS,甚至JS都不起作用.

同样在控制台中我收到以下错误: …

javascript css asp.net jquery datatables

62
推荐指数
8
解决办法
25万
查看次数

jquery数据表隐藏列

有没有办法用jquery datatables插件隐藏(和显示)表列?

我想出了如何重新加载表数据:使用fnClearTablefnAddData.

但我的问题是,在我对表的一个视图中(例如隐藏模式)我不想显示某些列.

javascript jquery datatables

58
推荐指数
8
解决办法
13万
查看次数

数据表日期排序dd/mm/yyyy问题

我正在使用一个名为datatables的Jquery插件

它太棒了,但根据dd/mm/yyyy格式,我无法正确排序日期.

我查看了他们的支持格式,但这些修复似乎都不起作用.

有人可以帮我吗?

jquery datatables date-sorting

58
推荐指数
6
解决办法
12万
查看次数

DataTables:无法读取未定义的属性"长度"

我理解这是一个受欢迎的问题,我已经在Stack Overflow和其他网站(包括datatables网站)上阅读了所有类似的问题.

为了澄清,我正在使用

  • PHP Codeigniter
  • Materliazecss

我还确保我正确地收到了JSON数组:

[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]
Run Code Online (Sandbox Code Playgroud)

我的HTML表格如下所示:

<table id="customer_table">
     <thead>
         <tr>
            <th>Name</th>
            <th>Phone</th>
         </tr>
     </thead>
</table>
Run Code Online (Sandbox Code Playgroud)

这是我的document.ready功能:

  $(document).ready(function(){
            //$('#customer_table').DataTable();
            $('#customer_table').DataTable( {
                "ajax": 'json',
                "dataSrc": "",
                 "columns": [
                    { "data": "email" },
                    { "data": "name_en" }
                ]
            });
  });
Run Code Online (Sandbox Code Playgroud)

我得到的错误是

未捕获的TypeError:无法读取未定义的属性"长度"

jquery json codeigniter html-table datatables

58
推荐指数
4
解决办法
9万
查看次数

datatable jquery - 表头宽度未与主体宽度对齐

我正在使用jQuery数据表.运行应用程序时,标题宽度与主体宽度不对齐.但是当我点击标题时,它会与身体宽度对齐,但即便如此,也会出现一些轻微的错位.此问题仅在IE中出现.

的jsfiddle

这是页面加载时的样子:

在此输入图像描述

点击标题后:

在此输入图像描述

我的数据表代码:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});
Run Code Online (Sandbox Code Playgroud)

rates是我的表id.
任何人都可以帮我这个吗?提前致谢.

jquery alignment datatables

57
推荐指数
10
解决办法
9万
查看次数