有关datatables的非常规教程

有关datatables的非常规教程

1、

//$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
table.columns.adjust()

2、

{ "data": "name",'sClass': "text-center" },

sClass为控制居中的。

3、

table = $('#example').DataTable({

"aLengthMenu": [10,20,50,100, 200, 500], //更改显示记录数选项 
"iDisplayLength": 100, //默认显示的记录数

//"dom": 't<"d"r><"row"<"col-md-2"l><"col-md-2"i><"col-md-8"p>>',
//"processing": true,
//"serverSide": true,
//"scrollY": tableScrollHeight,

dom: 't<"d"r><"row"<"col-md-4"i><"col-md-8"p>>',
"processing": true,
"serverSide": true,
"sScrollY": 260,
"bSort": false,
"bPaginate": false, //是否显示（应用）分页器

"ajax": {
"url": "/event/GetData",
datatype: "JSON",
dataSrc: function (data) {
$.extend(data, {
iTotalDisplayRecords: data.total,
iTotalRecords: data.total,
});
return data.maliang;
}

},
"columns": [
{
data: "Idx",
render: function (data, type, row, meta) {
var content = '<label style="margin:0">';
content += ' <input type="checkbox" data-type="selectRow" value="' + data + '" />';
content += ' <span></span>';
content += '</label>';
return content;
},
 "50"
},
{ "data": null },
{ "data": "Idx" },
{ "data": "address" },
{ "data": "name",'sClass': "text-center" },
{ "data": "Salary" },
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": '<button type="button" edit class="btn btn-primary btn-xs" aria-label="Left Align"><span class="glyphicon glyphicon-edit" aria-hidden="true">编辑</span></button> ' +
'<button delete type="button" class="btn btn-danger btn-xs" aria-label="Left Align"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true">删除</span></button>'
},

],
columnDefs: [{
'targets': [0, 4],
'orderable': false
},
{
targets: 7,
render: function (data, type, row, meta) {
return '<div class="btn-group" btn-group>' +
'<ul class="dropdown-menu row_actions dropdown-menu-right clearfix">' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a jssq href="#" data-toggle="modal" data-target="#roleModal">角色授权</a></li>' +
'<li><a ysq href="#" data-toggle="modal" data-target="#cloudModal">云授权</a></li>' +
'<li><a sc href="#">删除</a></li>' +
'</ul>' +
"<img width='18' height='18' data-direct='more' ddddddd='" + JSON.stringify(row) +"'"+' src= "/Content/images/更多.svg"/><img width="18" height="18" src= "/Content/images/修改.svg" /><img width="18" height="18" src="/Content/images/用户.svg" /></div>';
}
}],
"order": [[3, "desc"]],
"createdRow": function (row, data, index) {
if (data.Idx == 11) {
$(row).find("td:eq(3)").addClass("highlight")
}
if (data.Idx == 6) {
$(row).find("td").addClass("highlight")
}

if (data.appEditServerCheck) {
$(row).find('input[data-type="selectRow"]').prop('checked', true)
$(row).addClass("selected")
}

},
language: {
"sProcessing": "正在处理数据...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"fnDrawCallback": function () {
var api = this.api();
var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
api.column(1).nodes().each(function (cell, i) {
cell.innerHTML = startIndex + i + 1
});

$('.dropdown-toggle').dropdown()
}
});

 4、

关于数据的加载和数据的转换关系

"ajax": {
"url": "/event/GetData",
datatype: "JSON",
dataSrc: function (data) {
$.extend(data, {
iTotalDisplayRecords: data.total,
iTotalRecords: data.total,
});
return data.maliang;
},
data: function (d) {
d.t1 = $('#t1').val()
}

},

5、还有一个特别重要的每页显示多少条

"aLengthMenu": [10,20,50,100, 200, 500], //更改显示记录数选项 

 6、datatables消费的常规数据

namespace MathSoftModelLib
{
    /// <summary>
    /// 用于datatable插件的数据返回类型
    /// https://datatables.net/
    /// 马良
    /// 日期
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public class datatablesModel<T>
    {
        public int draw { get; set; }
        public int recordsTotal { get; set; }
        public int recordsFiltered { get; set; }
        public List<T> data { get; set; }
    }
}

这段代码是用C#代码进行描述的。

7、推入的数据进行转换

  d.t1 = $('#t1').val();
  d.limit = d.length;
  d.start = d.start;

其中length和start 是本身带的参数。

8、关于离线数据获取或者删除。

如何获取离线数据呢

var table = $('#example').DataTable();
 
// Find indexes of rows which have `Yes` in the second column
var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {
    return table.cell( rowIdx, 1 ).data() === 'Yes' ? true : false;
} );
 
// Add a class to those rows using an index selector
table.rows( indexes )
    .nodes()
    .to$()
    .addClass( 'highlight' );

var table = $('#example').DataTable();
var row = table.row('#row-42');

var table = $('#example').DataTable();
var rows = table.rows( [ '#row-42', '#row-51' ] );

var table = $('#example').DataTable();
var rows = table.rows('.priority');

var table = $('#example').DataTable();
var rows = table.rows('.important, .intermediate');

获取到离线数据，我们对数据进行操作。

进行删除操作。

var table = $('#example').DataTable();
 
var rows = table
    .rows( '.selected' )
    .remove()
    .draw();

 9、关于排序的。离线数据排序的方案

$(document).ready(function() {
        $('#example').dataTable();
    });

<table id="example" 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>
                        <tr>
                            <td data-search="Tiger Nixon">T. Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                            <td data-order="1303686000">Mon 25th Apr 11</td>
                            <td data-order="320800">$320,800/y</td>
                        </tr>
                        <tr>
                            <td data-search="Garrett Winters">G. Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>63</td>
                            <td data-order="1311548400">Mon 25th Jul 11</td>
                            <td data-order="170750">$170,750/y</td>
                        </tr>
                        <tr>
                            <td data-search="Ashton Cox">A. Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                            <td data-order="1231718400">Mon 12th Jan 09</td>
                            <td data-order="86000">$86,000/y</td>
                        </tr>
                        <tr>
                            <td data-search="Cedric Kelly">C. Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                            <td data-order="1332975600">Thu 29th Mar 12</td>
                            <td data-order="433060">$433,060/y</td>
                        </tr>
                        <tr>
                            <td data-search="Airi Satou">A. Satou</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>33</td>
                            <td data-order="1227830400">Fri 28th Nov 08</td>
                            <td data-order="162700">$162,700/y</td>
                        </tr>
                        <tr>
                            <td data-search="Brielle Williamson">B. Williamson</td>
                            <td>Integration Specialist</td>
                            <td>New York</td>
                            <td>61</td>
                            <td data-order="1354406400">Sun 2nd Dec 12</td>
                            <td data-order="372000">$372,000/y</td>
                        </tr>
                        <tr>
                            <td data-search="Herrod Chandler">H. Chandler</td>
                            <td>Sales Assistant</td>
                            <td>San Francisco</td>
                            <td>59</td>
                            <td data-order="1344207600">Mon 6th Aug 12</td>
                            <td data-order="137500">$137,500/y</td>
                        </tr>
                        <tr>
                            <td data-search="Rhona Davidson">R. Davidson</td>
                            <td>Integration Specialist</td>
                            <td>Tokyo</td>
                            <td>55</td>
                            <td data-order="1287010800">Thu 14th Oct 10</td>
                            <td data-order="327900">$327,900/y</td>
                        </tr>
                        <tr>
                            <td data-search="Colleen Hurst">C. Hurst</td>
                            <td>Javascript Developer</td>
                            <td>San Francisco</td>
                            <td>39</td>
                            <td data-order="1252969200">Tue 15th Sep 09</td>
                            <td data-order="205500">$205,500/y</td>
                        </tr>
                        <tr>
                            <td data-search="Sonya Frost">S. Frost</td>
                            <td>Software Engineer</td>
                            <td>Edinburgh</td>
                            <td>23</td>
                            <td data-order="1229126400">Sat 13th Dec 08</td>
                            <td data-order="103600">$103,600/y</td>
                        </tr>
                        <tr>
                            <td data-search="Jena Gaines">J. Gaines</td>
                            <td>Office Manager</td>
                            <td>London</td>
                            <td>30</td>
                            <td data-order="1229644800">Fri 19th Dec 08</td>
                            <td data-order="90560">$90,560/y</td>
                        </tr>
                                </tbody>
                </table>

 离线数据批量删除

$('#example tbody tr').each(function (index, el) {

                 var data=   table
                        .row(el).data();
                    if (data.dddd = "qw3rwe") {
                        table
                            .row(el)
                            .remove()
                            .draw();
                    }
                   
                });

编辑的时候获取数据

 currentthis = $(this).parents('tr');
                e.stopPropagation();
                optype = 2;

                $('#myModal_').modal();
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var data = row.data();