jeffdupont/bootstrap-data-table

ajax powered table

bootstrap-data-table's Issues

min file out of sync

the compressed file and uncompressed file are not the same. The uncompressed file was changed to support BS3, the compressed works w/ BS2.

Seems can not reload/refresh table

Dear~~
seems the table data could just load one time? any methods could reload the data grid with different params ?

Thx

Demo of data table?

Is there a demo, could not find it?

Bootstrap 3.1.1Patch

Index: httpdocs/js/bootstrap-datatable.js

--- httpdocs/js/bootstrap-datatable.js (revision 7680)
+++ httpdocs/js/bootstrap-datatable.js (working copy)
@@ -44,7 +44,9 @@
this.$default = this.$element.children().length ?
this.$element.children() :
$("

")

•    .addClass("alert alert-error")
  

  +// ------------- Start bootstrap3.1.1 Patch ---------------

•    .addClass("alert alert-danger")
  

  +// ------------- End bootstrap3.1.1 Patch ---------------
  .html("No Results Found");

  this.$element.addClass("clearfix");
  @@ -186,10 +197,13 @@
  })
  .append(
  $("

  ")

•            .addClass("progress progress-striped active")
  

  +// ------------- Start bootstrap3.1.1 Patch ---------------

•            .addClass("progress progress-striped")
           .append(
             $("<div></div>")
  

•                .addClass("bar")
  

•                .addClass("progress-bar progress-bar-info")
  

•                .attr('style', "width: 40%")
  

  +// ------------- End bootstrap3.1.1 Patch -----------------
  )
  )
  .appendTo(document.body)

Can't get it to work

I can't get anything to appear... even the example.html file you included won't show any data. Am I missing something?

How to apply options.filter values

I cannot see how to use the filter form and apply the values to the options.filter object.

Can this be done with about a page-reload and if so how?

Bootstrap 3 and pagination

The bootstrap-data-table moved to BS3 quite nicely except for Pagination.

At the moment its set on the

but it needs to on on the

element.

Sorting bug, after desc there is null

When I click to sort - it's sends to server:

currentPage:1
perPage:5
sort[0][]:column_0
sort[0][]:asc

After next click:

currentPage:1
perPage:5
sort[0][]:column_0
sort[0][]:desc

And next click:

currentPage:1
perPage:5
sort[0][]:column_0
sort[0][]:

Strange filter icon

On the attached screen grab, I have an errant black filter icon to the right of the dt-toolbar-container that has been there since loading the JS initially. I wonder if you could point me at the location in the JS source code where it is invoked so I can get control of it and move it inside a Btn which I think it should be.

---

You make a point in your source code at line 34 about Local Storage. May I suggest that you use the facilities of Store.Js. I have added that to my version of your JS so that I can quickly and easily solve some local issues such as multi-lingual prompts and other variables.

extending bootstrap-data-table.

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;
}

});

About sorting

When we do some columns sortable we can't understand which of them sortable at once. We should hover each column to recognize that is sortable.

I find out how to solve this problem from here http://themergency.com/footable-demo/demo-sorting.htm

Dynamically update the table

Hi everybody,

Frist of all compliments for your work and sorry for my english.

I want dynamically update the column values. I tried to check your example but i don't understand how i can figure out of my problem.

Can you help me?

Thanks
Filippo

Reload Data

I have a filter modal and I would like to reload data with my filters.
Are there any reload event for this?

Filter input disappears

In RunFilter call, variable o.filter does not write anything in memory. So filters do not work.

allowExport

hi guy,

i love your bootstrap extend, but when u think you will release the 'allowExport' function?

Regards,

Dennis

Question about sortOrder

https://github.com/jeffdupont/bootstrap-data-table/blob/master/bootstrap-datatable.js#L463
The last time I create issue about this.
Why not just do so:
colprop.sortOrder = colprop.sortOrder == "asc" ? "desc" : "asc";

Sorry for my bad english.

Sort Option

RE: the optional: sort: [[]] in the constructor on a first time vanilla install, i'm getting TypeError: o.sort is undefined, line 308 of bootstrap-datatable.js. What do you suspect to be the cause?

Clickable rows

Hi,

Is there a way to make a row clickable or include a button in a row that can be assigned to an arbitrary action when clicked. I need to pass an ID back to the backend API when the row or button is clicked to invoke an action based on the row.

Regards,

Carl

Question about rerender table in onClick event

i've add some new tool on the toolbar and it call the modal on the view page where the plugin is call. how can i rerender this table after i have ajax call? i've been doin this one

function _initDeleteModal() {
var o = this.options
, $e = this.$element
, $toggle = $("")
, that = this

// render the display modal button
$toggle
  .addClass("btn")
  .data("toggle", "modal")
  .attr("href", "#")
  .attr("title", "Delete a row.")
  .html("<i class=\"icon-trash\"></i>")
  .click(function() {
    var numItems = $('.info').length;
    if(numItems > 0){
        if($(o.deleteModal).hasClass("modal"))
          $(o.deleteModal)
            .modal();
        else if($(o.deleteModal).is(":visible"))
          $(o.deleteModal)
            .hide();
        else
          $(o.deleteModal)
            .show();
    }
    $('#btn-delete')
                    .click(function(evt) {
        that.loading( true );
                    that.render();  // how can i get this function run only once    
                    that.loading(false);
            }) 
    return false;
  })

this.buttons.unshift($toggle);

}

it only work good on the first call of onclick function.. but in the second times i call onClick i got the table rendered the toolbar twice and the pagination bar twice and more

Multi Row Select

Dear~
wonder if could support multi row selected ?
Thx