datables

https://editor.datatables.net/examples/styling/bootstrap.html

 

https://datatables.net/forums/discussion/29319/new-rowsgroup-plugin-merge-cells-vertically-rowspan

 

https://github.com/ashl1/datatables-rowsgroup/blob/master/example.html

 

 

 

<html>
<head>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<script src="dataTables.rowsGroup.js"></script>
</head>
<body>
<button id="update_btn">Manual remerge cells</button>
<table id="example"></table>
<table id="example1"></table>
<script>
$(function(){
var data = [
['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '2Element N'],
['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup2', 'Group2', 'sub-subgroup1', 'Element2', '2Element 2'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '2Element 2'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '2Element 4'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '2Element 2'],
['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '2Element 17'],
['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '2Element 211'],

]
var table = $('#example').DataTable({
"iDisplayLength" : 8,
columns: [
{
title: 'First group',
},
{
name: 'second',
title: 'Second group [order first]',
},
{
title: 'Third group',
},
{
title: 'Forth ungrouped',
},
{
title: 'Fifth ungrouped',
},
],
data: data,
/*lengthChange: false,
searching: true,
paging: true,
order: [],*/
rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows groupping is applied
// (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
0
],
})
/*table.draw(false);
$('#update_btn').click(function(){
table.rowsgroup.update();
})*/

var table1 = $('#example1').DataTable({
"iDisplayLength" : 8,
columns: [
{
title: 'First group',
},
{
name: 'second',
title: 'Second group [order first]',
},
{
title: 'Third group',
},
{
title: 'Forth ungrouped',
},
{
title: 'Fifth ungrouped',
},
],
data: data,
/*lengthChange: false,
searching: true,
paging: true,
order: [],*/
rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows groupping is applied
// (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
0
],
})
/*table1.draw(false);*/
/*$('#update_btn').click(function(){
table.rowsgroup.update();
})*/


});
</script>
</body>
</html>

 

 

var table1 = $('#example1').DataTable();

var table2 = $('#example2').DataTable();
 
$('#example tbody').on( 'click', 'img.icon-transfer', function () {
    var row = table1.row( $(this).parents('tr') );
    var rowNode = row.node();
    row.remove();
 
    table2
        .row.add( rowNode )
        .draw();
} );
 
 
var table = $('#example').DataTable();
 
$('#example tbody').on( 'click', 'tr', function () {
    var d = table.row( this ).data();
     
    d.counter++;
 
    table
        .row( this )
        .data( d )
        .draw();
} );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
 
    $('#button').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );
 
 
 
 
 
$(document).ready(function() {
    var t = $('#example').DataTable();
    var counter = 1;
 
    $('#addRow').on( 'click', function () {
        t.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw();
 
        counter++;
    } );
 
    // Automatically add a first row of data
    $('#addRow').click();
} );

posted on 2016-10-01 10:29  大山下的树  阅读(477)  评论(0)    收藏  举报

导航