小编dav*_*rad的帖子

我正在使用DataTables：https : //www.datatables.net/

这是我的HTML：

    <div class="dataTable_wrapper">
        <table class="table table-striped table-bordered table-hover center" id="dataTables-example">
           <thead>
              <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                   <td>1</td>
                   <td>title 1</td>
                   <td><a href="./action-1"><span class="on"></span></a></td>
              </tr>
              <tr>
                   <td>2</td>
                   <td>title 2</td>
                   <td><a href="./action-2"><span class="off"></span></a></td>
              </tr>
              <tr>
                   <td>3</td>
                   <td>title 3</td>
                   <td><a href="./action-1"><span class="on"></span></a></td>
              </tr>
            </tbody>

我想用最后一列对该表进行排序，但是没有排序的价值……只是类“ on”和“ off”。我可以添加诸如rel之类的链接标记或放置0/1值的东西吗？还是应该使用JavaScript来做到这一点？

这是JS代码：

        $('#dataTables-example').DataTable({
            responsive: true,
            "order": []

        });

我在谷歌搜索过，但我无法得到它。我需要这种类型的值在标记中

我尝试了一些东西，但没有得到结果

var locations = [
  [33.906896, -6.263123, 20],
  [34.053993, -6.792237, 30],
  [33.994469, -6.848702, 40],
  [33.587596, -7.657156, 50],
  [33.531808, -7.674601, 8],
  [33.58824, -7.673278, 12],
  [33.542325, -7.578557, 15]

];
var mapOptions = {
  zoom: 4,
  center: new google.maps.LatLng(28.975750, 10.669184),
  mapTypeId: google.maps.MapTypeId.SATELLITE
};

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    icon: 'icon.png' + locations[i][2]
    map: map
  });
}

我正在使用数据表。我的代码工作正常。现在，我想添加一个加载器图像（gif）。我不知道该如何添加。这是我的数据表脚本。

$(document).ready(function() {
    var ref = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "mails",
        "columns": [
                    { "data": "from" },
                    { "data": "object" },
                    { "data": "created" }
                ]
    } );

} );

我的 html 页面中有一个现有的 jQuery dataTables 对象。

我需要通过单击触发 Ajax 调用以检索 JSON 中的新数据的刷新按钮来更新第一个数据表<a href>上所有<td>s 中的一些元素<tr>。

这些<a href>元素是使用 Ajax 检索到的超链接动态构建的，因此我需要为每个<a href>元素提供html 。

<tr id="LoJXi76DH3" role="row" class="odd">
    <td><a data-transition="pop" data-mini="true" data-position-to="window" data-rel="popup" href="#deleteThisRunModel" onclick="copyRunModelObjId(&quot;LoJXi76DH3&quot;);" title="Delete this job"><img width="16" height="16" src="css/img/Remove24.png"></a></td>
    <td><span>LoJXi76DH3</span></td>
    <td><span>500</span></td>
    <td><span>Completed</span></td>
    <td><span>Firstname Lastname</span></td>
    <td><span>9/12/2015, 1:07:39 PM</span></td>
    <td><span>9/12/2015, 1:18:47 PM</span></td>
    <td><span>Successful</span><span> </span><a title="Details" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" data-transition="pop" data-rel="popup" href="#popupRMDetails_LoJXi76DH3">Details</a></td>
    <td><a target="_blank" href="View.jsp?res=500&amp;url=myImage.png">View</a><span> </span><a href="myServlet?action=exportForDownload&amp;jobOID=LoJXi76DH3">Download</a></td>
</tr>

只是想知道我应该使用哪个函数/api来完成这项工作？

我在一个带有引导程序和 jquery 的站点上使用数据表来处理大型（2000 多个条目）表。一些（文本）值太长了，目前我使用的是这样的：

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

在数据表中剪切字符串并在 html 标题中显示完整值。有一个更好的方法吗？就像一个自动剪切但在点击时显示所有内容的插件或类似的东西？我无法找到一些东西。

我看到了 jquery dotdotdot，但它没有让我点击扩展。

我有带有状态保存和标头过滤器的数据表，请参阅下面的代码。

dttblEnrolledUser = $('#tblUsers').dataTable({
            paging: true,
            searching: true,
            bLengthChange: false,
            info: false,
            ordering: true,
            columnDefs:
                [{ targets: 0, orderable: false },
                { targets: 5, orderable: false }],
            order: [1, 'asc'],
            stateSave: true,
            dom: '<"top"i>rt<"bottom"flp><"clear">'
 });

这是 Statesave 和应用过滤值的代码。

var state = dttblEnrolledUser.api().state.loaded();
    if (state) {
        dttblEnrolledUser.api().columns().eq(0).each(function (colIdx)
        {
            var colSearch = state.columns[colIdx].search;
            if (colSearch.search) {
                $( 'input', dttblEnrolledUser.api().column( colIdx ).header() ).val( colSearch.search );
            }
        });

        dttblEnrolledUser.api().draw();
    }

 // Apply the search
dttblEnrolledUser.api().columns().eq(0).each( function (colIdx) {
        $('input', dttblEnrolledUser.api().column(colIdx).header()).on( 'keyup change', function …

我使用以下代码创建了一个数据表：

userTable = $('#userTable').DataTable({
                serverSide: true,
                processing: true,
                ajax: {
                        url: "{!! route('listOfUsersAjax') !!}",
                        type: "GET",
                        dataSrc: function ( json ) {
                          //console.log(json);;
                            for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                                if (json.data[i].is_manager == 1){
                                    json.data[i].is_manager = 'Yes';
                                }
                                else {
                                    json.data[i].is_manager = 'No';
                                }
                            }
                            return json.data;
                        }
                    },
                columns: [
                    {
                        className:      'details-control',
                        orderable:      false,
                        searchable:     false,
                        data:           null,
                        defaultContent: ''
                    },
                    { name: 'id', data: 'id' },
                    { name: 'name', data: 'name' },
                    { …

我正在尝试仅从数据表中导出选定的行。通过将扩展选项设置为 csv，我可以成功地将选定的行导出到 csv 文件，如下面的代码所示。

buttons: [
    'colvis',
    'selectAll',
    'selectNone',
    {
        extend: 'csv',
        text: 'Export Selected',
        exportOptions: {
            columns: ':visible:not(.not-exported)',
            modifier: {
                 selected: true
            }
        },
        title: 'Data export'
    }
],

但是我想要一个下拉列表（csv，复制，打印），我可以从中选择将选择的行导出到。我尝试在下面的代码中使用集合。但它导出所有可见的行。有人请帮忙

buttons: [
    'colvis',
    'selectAll',
    'selectNone',
    {
        extend: 'collection',
        text: 'Export Selected',
        buttons: ['copy','csv','print'],
        exportOptions: {
            columns: ':visible:not(.not-exported)',
            modifier: {
                 selected: true
            }
        },
        title: 'Data export'
    }
],

有人可以帮助我遍历数据表列中的所有行并更新其中的数据吗？到目前为止，我已经找到了一种遍历列的方法：

var table = $("#my_table").DataTable();
table.column(2)
    .data()
    .each(function(value, index) {
        console.log(value);
        value = 'abc123'; //this does not work
    });

但是，我不确定如何更新该值.. 有人可以帮忙吗？

提前致谢！

我正在使用AngularJS和angular-datatable，并且想连续处理该事件，我已经设置了控制器来侦听该事件，但是它不起作用。我的代码是：

html

<div  class="panel panel-flat">
    <div class="panel-heading">
        <h6 class="panel-title">Planilla</h6>
    </div>
    <div class="panel-heading"> 
    <table class="table datatable-basic table-hover" datatable="ng" dt-options="empleadoList.dtOptions"  dt-column-defs="empleadoList.dtColumnDefs" >
        <thead>
            <tr>
                <th style="width: 30px;">Nro.</th>  
                <th>Nombre Completo</th>
                <th class="col-md-2">DNI</th>
                <th class="col-md-2">Celular</th>
                <th class="col-md-2">Teléfono</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="empleado in empleadoList.empleados">
                <td style="width: 30px;">{{$index + 1}}</td>
                <td> <span class="text-muted"><i class="icon-user"></i>{{empleado.apellidoPaterno}} {{empleado.apellidoMaterno}} {{empleado.nombre}}</span></td>
                <td><span class="text-success-600"><span class="status-mark border-blue position-left"></span>{{empleado.dni}}</span></td>
                <td><span class="text-success-600"><i class="icon-mobile position-left"></i> {{empleado.celular}}</span></td>
                <td><h6 class="text-semibold"><i class="icon-phone position-left"></i> {{empleado.telefono}}</h6></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

controller.js

App.controller('EmpleadoListController', function($scope,$resource,EmpleadoService,DTOptionsBuilder,DTColumnDefBuilder) {

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withDisplayLength(10)
    .withOption('bLengthChange', …