对此有很多疑问,但我从来没有找到一个对我有用的问题.我有一个简单而简单的HTML表,其中正在填充来自AJAX调用的行.然后我想用DataTable插件更新表,但它不起作用.我有一个HTML表,看起来像这样:

<table id="myTable">
  <thead>
     <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

在我的jQuery页面加载中

$(document).ready(function(){
        var oTable = $('#myTable').dataTable({
            "aoColumns": [
              { "bSortable": false },
              null, null, null, null
            ]
        });
});

最后我的下拉列表更改功能

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
        var oTable = $('#myTable').dataTable(); // Nothing happens
        var oTable = $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [ …

我使用https://datatables.net/reference/api/rows.add%28%29链接工作,但数据显示表格为[object,object].如何将对象显示为字符串.我用过JSON.stringify(obj)它也没用.

HTML

<table id="exampleTable">
 <thead>
  <tr>
   <th>Year</th>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>2012</td>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>2012</td>
    <td>February</td>
    <td>$80</td>
   </tr>
 </table>

JS

$('#addRows').click(); 

var table3 = $('#exampleTable').DataTable(); 

$('#addRows').on( 'click', function () { 
    table3.row.add(
       [ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" },
         {"Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }]
    ).draw(); 
});

我以前在PHP中使用过此插件,所以我想我会再次使用它来进行ASP项目.

由于某种原因,它不适用于我的GridView控件.

javascript块:

<link type="text/css" href="../scripts/demo_table.css" rel="stylesheet" />  

    <script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $(".gvv").dataTable();
        });
        </script>

Gridview代码:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="Prop_No" DataSourceID="testtt" CssClass="gvv">

我做错了什么或DataTables不能用于ASP控件？

我正在使用jQuery DataTables(http://www.datatables.net/)来显示一些表格数据.搜索/过滤器是一个强大的功能.虽然如果在表格中搜索多个关键字,搜索仅过滤已过滤的数据.

比如这里的例子 - http://jsfiddle.net/illuminatus/2j0Lz5or/1/

如果搜索关键字10 99,则不会产生任何结果.我希望搜索显示包含搜索或输入的所有关键字的所有结果/行.

搜索10 99将显示第1,5和6行.

从技术上讲,搜索应该是"搜索".

非常感谢任何帮助.

编辑:搜索应该是'或'搜索.

我正在尝试为jQuery数据表中的几列指定固定宽度.我试图通过datatables文档中指定的列定义来完成此任务,但列和列标题仍然是自动调整大小的.

这是我一直在使用的jsFiddle:jsFiddle

JavaScript的:

var table = $('#example2').DataTable({
        "tabIndex": 8,
        "dom": '<"fcstTableWrapper"t>lp',
        "bFilter": false,
        "bAutoWidth": false,
        "data": [],
        "columnDefs": [
            {
                "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '',
                "targets": 0
            },
            { 
                "targets": 1},
            { 
                "targets": 2,
                "width": "60px"},
            { 
                "targets": 3,
                "width": "1100px"},
            { 
                "targets": 4},
            { 
                "targets": "dlySlsFcstDay"},
            { 
                "targets": "dlySlsFcstWkTtl",
                "width": "60px"}
        ],
        "order": [
            [1, 'asc']
        ]
    });

HTML:

<div class="forecastTableDiv">
            <table id="example2" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th colspan="5"></th>
                    <th …

目标

默认情况下,使用闪亮的DataTable中的数千个分隔符渲染大数字.

问题

文档读(对我来说)应该已经显示了千位分隔符.我是否遇到了兼容性问题,或者我是否需要在代码中添加更多内容,如果是,那又怎么样？

[更新]还有另一个SO问题,试图解决闪亮的预格式化数据的排序.问题尚未解决,但建议另一条路线 - 事先格式化.这是一条可取的路线,如果是这样,如何正确解决其他OP的排序问题？

背景

我试图改善闪亮表的输出,以提高可读性.我已成功使用另一个SO问题来冻结标题,但我正在努力使数字格式正确.

MWE

library(shiny)
runApp(
  list(ui = fluidPage(
    tagList(
      singleton(tags$head(tags$script(src='//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js',type='text/javascript'))),
      singleton(tags$head(tags$link(href='//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css',rel='stylesheet',type='text/css')))
    ), 

    dataTableOutput("mytable")
  )
  , server = function(input, output, session){
    output$mytable <- renderDataTable(iris*1000,
                                      options = list(
                                        pageLength = 50,
                                        language.thousands=",",
                                        initComplete = I("function(settings, json){
                                          new $.fn.dataTable.FixedHeader(this, {
                                            left:   true
                                          } );
                                        }")
                                      )
    )
  })
)

文档

看看DataTable文档,它看起来就像设置语言一样.数千就足够了:

DataTables的内置数字格式化程序(formatNumberDT)用于格式化表信息中使用的大数字.

language.thousands

默认情况下,DataTables将使用language.thousandsDT中指定的字符(反过来,默认情况下是逗号)作为千位分隔符.

formatNumber

在formatNumber中它有一个可以添加的函数,但是,这对我来说是一个新的,所以我不确定在现有代码的上下文中如何使用这个函数.

$('#example').dataTable( {
  "formatNumber": function ( toFormat ) {
    return toFormat.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g, "'"
    );
  };
} …

我正在为一个小表(12行)使用jQuery Datatables插件.某些<input type="text" ...字段允许编辑.当输入字段失去焦点时,我需要验证其值并可能更改字段值.我没有能够在不发出事件的情况下获得DataTables识别的修改输入字段值.draw(),但这会导致表格滚动到表格的顶部.

有没有办法在发出.draw()之后保持当前的滚动位置？

$('#mytable').on('blur', 'input', function (e) {

    var inputFieldId = this.id;
    var inputFieldVal = $(this).val();

    { ... perform validation of field value ... }

    $('#mytable').DataTable().rows().invalidate().draw();
});

编辑

我看到有人试图做同样的事情,他们表示以下代码适用于他们.这似乎是一种完成我需要的非常简单的方法,但我总是自己得到scrollTop = 0.有人看到我如何获得当前所选行的行索引？

var scrollPos = $(".dataTables_scrollBody").scrollTop();
$('#mytable').DataTable().rows().invalidate().draw(false);
$(".dataTables_scrollBody").scrollTop(scrollPos);

我在插入每个列的总和值(类"sum")时会遇到一些细节问题.

代码(或多或少直接来自DataTables.net):

var table = $('#example').DataTable();
        table.columns('.sum').each(function (el) {
            var sum = table
                .column(el)
                .data()
                .reduce(function (a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });
            $(el).html('Sum: ' + sum);
        });

"sum"具有正确的值,但不知何故未插入页脚!即它的元素显示为空.

请注意,下面的代码段工作正常,但我想用类和求和每列.

var table = $('#example').DataTable();
var column = table.column(4);

$(column.footer()).html(
    column.data().reduce(function (a, b) {
        return parseInt(a, 10) + parseInt(b, 10);
    })
);

////////////////////////////////////////////////// //////////////////////////////////

编辑 - 解决方法:

我将代码移动到DataTable初始化的位置,然后使用footerCallback.见下面的代码:

"footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;
                   
                    // Remove the formatting to get integer …

我是jQuery的新手,很抱歉,如果我的问题太简单了.

我想做这样的事情:

$("#send-one").html('done. ');

var tableProgress= $("<table id='table-progress'><tr><td></td></tr></table>");

$("#send-one").empty().append(tableProgress);

tableProgress.dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});

所有这些都发生在jQuery ui对话框中.

它不起作用,我认为这是因为.dataTable()插件找不到表所以我试图使用jQuery $ .when.

错误就是这个

未捕获的TypeError:无法读取未定义的属性'asSorting'

我需要的是:在插入的表中$("#send-one").html('done. ' + tableProgress)使用.datatable插件,但直接使用.datatable()可能与插入不同步.

我也尝试过:

$("#send-one").html('done. ' + tableProgress);
$('#table-progress').dataTable();

我正在使用angularjs构建一个网站,我从网络服务获取数据.我需要将数据填充到数据表并为每行创建一个编辑按钮.经过一番调查后,我想出了这个

问题是ng-click不起作用可能是因为我需要编译注入表格单元格的html.我已经尝试过几种方式,但不幸的是我仍然很有角度,我似乎不明白我是如何做到这一点的.我真的需要帮助.

这是我的指示:

dialogApp.directive('myTable', function ($compile) {
return {
    restrict: 'E, A, C',
    link: function (scope, element, attrs, controller) {
        var dataTable = element.dataTable(scope.options);

        scope.$watch('options.aaData', handleModelUpdates, true);

        function handleModelUpdates(newData) {
            var data = newData || null;
            if (data) {
                dataTable.fnClearTable();
                dataTable.fnAddData(data);
            }
        }
    },
    scope: {
        options: "="
    }
};}); 

控制器:

dialogApp.controller('DataTableTestController', ['$scope', function($scope){
$scope.coisas = "coisas";
$scope.botaoEdit = function(a){
    console.log(a);
};

$scope.options = {
    "sDom": '<"H"lf>t<"F"ip>',
    "bStateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": true, …