extending bootstrap-data-table.

[ghost]

Hi Mr. jeffdupont,

can you please provide the code snippet to extend the data-table plugin, as i need to add subgrid functionality.

i tried with below code but its not working:

;(function() {
$.datatable.extend({});
})(Jquery)

though i managed it with the below code from your example.html :

$("#table-container_1").datatable({
perPage: 5
, url: 'example-data.php'
, sort: '1'
, filter: '1'
// , url: 'example-data.json'
, showPagination: true
, showFilter: true
, filterModal: $("#table-container_1-filter")
, columns: [
{
title: ""

      , field: "id"
      , callback: function ( data, cell ) {
          return data[cell.field];
        }

    }
  , {
        title: "Column 1"
      , sortable: true
      , field: "column_0"
      , callback: function ( data, cell ) {
          return data[cell.field];
        }
      , filter: true
    }
  , {
        title: "Column 2"
      , sortable: true
      , field: "column_1"
    }
  , {
        title: "Column 3"
      , sortable: false
      , field: "column_2"
      , filter: true
      , css: {
            textAlign: 'right'
        }
    }
  , {
        title: "Column 4"
      , sortable: false
      , field: "column_3"
      , css: {
            textAlign: 'right'
        }
      , hidden: true
    }
]
, rowCallback : function (row, rowdata) {

    $(row).on("click", function() {
        if($('#tr_subgrid_' + rowdata.id).length == 0) {


            $('<tr/>', {
                "id" : 'tr_subgrid_' + rowdata.id,
                "html" : $('<td/>', {
                    "id" : 'td_subgrid_' + rowdata.id,
                    'colspan': $(this).children().length,
                    "html" : $('<div/>', {
                        "id" : 'div_subgrid_' + rowdata.id
                    })
                })
            }).insertAfter($(this));

            $('#div_subgrid_' + rowdata.id).datatable({
                showPagination : false,
                //url: 'example-data-subgrid.php?id=' + rowdata.id,
                title : '',
                url: 'example-data-subgrid.php',
                post: {
                    checkparam1 : $("#checkparam1").val(),
                },
                 sort: '1',
                filter: '1',
                columns : [
                    {
                        title: "Column 1"
                      , sortable: true
                      , field: "column_0"
                      , callback: function ( data, cell ) {
                          return data[cell.field];
                        }
                      , filter: true
                    }
                  , {
                        title: "Column 2"
                      , sortable: true
                      , field: "column_1"
                    }
                  , {
                        title: "Column 3"
                      , sortable: false
                      , field: "column_2"
                      , filter: true
                      , css: {
                            textAlign: 'right'
                        }
                    }
                  , {
                        title: "Column 4"
                      , sortable: false
                      , field: "column_3"
                      , css: {
                            textAlign: 'right'
                        }
                      , hidden: true
                    }
                ]

            });
        } else if($('#tr_subgrid_' + rowdata.id + ":visible").length > 0) {
            $('#tr_subgrid_' + rowdata.id).hide();
        } else {
            $('#tr_subgrid_' + rowdata.id).show();
        }

    });
    //console.log(rowdata);
    //console.log(row);

    return row;
}

});

[jeffdupont]

I haven't done any examples of a subgrid, but I would've done it as you had
in the rowCallback function.
On Jun 26, 2013 6:14 AM, "depakyadav" notifications@github.com wrote:

Hi Mr. jeffdupont,

can you please provide the code snippet to extend the data-table plugin,
as i need to add subgrid functionality.

i tried with below code but its not working:
;(function() {
$.datatable.extend({});
})(Jquery)

though i managed it with the below code from your example.html :
$("#table-container_1").datatable({
perPage: 5
, url: 'example-data.php'
, sort: '1'
, filter: '1'
// , url: 'example-data.json'
, showPagination: true
, showFilter: true
, filterModal: $("#table-container_1-filter")
, columns: [
{
title: ""

  , field: "id"
  , callback: function ( data, cell ) {
      return data[cell.field];
    }

}

, {
title: "Column 1"
, sortable: true
, field: "column_0"
, callback: function ( data, cell ) {
return data[cell.field];
}
, filter: true
}
, {
title: "Column 2"
, sortable: true
, field: "column_1"
}
, {
title: "Column 3"
, sortable: false
, field: "column_2"
, filter: true
, css: {
textAlign: 'right'
}
}
, {
title: "Column 4"
, sortable: false
, field: "column_3"
, css: {
textAlign: 'right'
}
, hidden: true
}
]
, rowCallback : function (row, rowdata) {

$(row).on("click", function() {
    if($('#tr_subgrid_' + rowdata.id).length == 0) {


        $('<tr/>', {
            "id" : 'tr_subgrid_' + rowdata.id,
            "html" : $('<td/>', {
                "id" : 'td_subgrid_' + rowdata.id,
                'colspan': $(this).children().length,
                "html" : $('<div/>', {
                    "id" : 'div_subgrid_' + rowdata.id
                })
            })
        }).insertAfter($(this));

        $('#div_subgrid_' + rowdata.id).datatable({
            showPagination : false,
            //url: 'example-data-subgrid.php?id=' + rowdata.id,
            title : '',
            url: 'example-data-subgrid.php',
            post: {
                checkparam1 : $("#checkparam1").val(),
            },
             sort: '1',
            filter: '1',
            columns : [
                {
                    title: "Column 1"
                  , sortable: true
                  , field: "column_0"
                  , callback: function ( data, cell ) {
                      return data[cell.field];
                    }
                  , filter: true
                }
              , {
                    title: "Column 2"
                  , sortable: true
                  , field: "column_1"
                }
              , {
                    title: "Column 3"
                  , sortable: false
                  , field: "column_2"
                  , filter: true
                  , css: {
                        textAlign: 'right'
                    }
                }
              , {
                    title: "Column 4"
                  , sortable: false
                  , field: "column_3"
                  , css: {
                        textAlign: 'right'
                    }
                  , hidden: true
                }
            ]

        });
    } else if($('#tr_subgrid_' + rowdata.id + ":visible").length > 0) {
        $('#tr_subgrid_' + rowdata.id).hide();
    } else {
        $('#tr_subgrid_' + rowdata.id).show();
    }

});
//console.log(rowdata);
//console.log(row);

return row;

}

});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/16
.