jQuery dataTables - Checking and adding new row if not exist using API .any() - datatables

I am trying to add new row in datatables, and by using the API .any() to check if the id is already exist in the rows and if it exist I will not add new row to my datatable, and here is the result form my request from databse see http://pastie.org/10196001 , but I am having trouble in checking.
socket.on('displayupdate',function(data){
var dataarray = JSON.parse(data);
dataarray.forEach(function(d){
if ( table.row.DT_RowId(d.DT_RowId).any() ) { // TypeError: table.row.DT_RowId is not a function
console.log('already exist cannot be added');
}else{
table.row.add(d).draw();
}
});
});
Thank you in advance.

You get the error, of course, because DT_RowId not is a function in the API. But DT_RowId is in fact the one and only property that get some special treatment from dataTables :
By assigning the ID you want to apply to each row using the property
DT_RowId of the data source object for each row, DataTables will
automatically add it for you.
So why not check rows() for that automatically injected id along with any()?
socket.on('displayupdate',function(data){
var DT_RowId,
dataarray = JSON.parse(data);
dataarray.forEach(function(d){
DT_RowId = d.DT_RowId;
if (table.rows('[id='+DT_RowId+']').any()) {
console.log('already exist cannot be added');
} else {
table.row.add(d).draw();
}
});
});
simplified demo -> http://jsfiddle.net/f1yyuz1c/

Related

How to get only updated row from database and make app more efficient

I'm creating laravel/vue.js CRUD app and I everything works fine for now but I'm worried about quality of my queries to database after update data.
I am using getAllData() each time when I update row in the database. Now, when I have a few records in database is not a problem to ask server each time and render new list in vue but in when I will have a few thousands of rows it will make my app slow and heavy.
Now I update database like this:
This is part of my vue.js update function:
updateStatus: function(id){
var index = _.findIndex(this.rows,["id",id]);
if (this.rows[index].pay_status=="waiting"){
axios.put("http://127.0.0.1:8000/api/payments/"+id
,{pay_status:"payed"}).then((response)=>{
this.getAllData();
}
This is my vue.js getAllData function:
getAllData: function(){
axios.get("http://127.0.0.1:8000/api/payments").then((response)=>{
this.rows = response.data;
});
}
and my PaymentsController:
namespace App\Http\Controllers;
use App\Payments;
use App\Suppliers;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Faker\Generator;
class PaymentsController extends Controller
{
public function index()
{
$payments = Payments::with('suppliers')->get();
return response($payments, Response::HTTP_OK);
}
}
my updation function:
public function update(Request $request, $id)
{
$payments = new Payments();
payments::where('id', $id)->update($request->all());
}
Is thare any way to make update in more efficient way, for example get only updated row from database and put it into my existing object with rows? Or maybe i should not worried about it?
Without seeing your logic:
Your controller can return the record:
return response(['payment' => $payment], Response::HTTP_OK);
Your axios method can observe that response and then do a replace on the index (just like you did when getting the index previously)
.then((response) => {
const { payment } = response.data;
this.items[index] = payment;
})
As long as items was instantiated in data as an [] then it's observable.
If you need updated rows for particular time period.
Also, you can do one thing. When user updating the row u can store the unique ID in new table and you can fetch the data through that ID. and then you can delete that ID from new table when you don't need latest updated data.
WHILE UPDATING THE ROW via ID
insert id in new table.
update the record.
if need updated record only >> use back-end conditions as per the
requirement >> Fetch id from new table join with main table.
when you don't need that latest updated record. Delete records from
new table. >> use back-end conditions as per the requirement >>
fetch from main table.
As #Ohgodwhy said, I change my code like this and now it works fine.
update function
public function update(Request $request, $id)
{
$payments = new Payments();
payments::where('id', $id)->update($request->all());
return response(payments::where('id', $id)->get(), Response::HTTP_OK);
}
axios
updateStatus: function(id){
var index = _.findIndex(this.rows,["id",id]);
if (this.rows[index].pay_status=="oczekuje"){
axios.put("http://127.0.0.1:8000/api/payments/"+id,{pay_status:"zapłacono"}).then((response)=>{
this.rows[index].pay_status=response.data[0].pay_status;
this.waitingInvoices = this.countInvoices();
this.toPay = this.calculatePayment();
});
} else if (this.rows[index].pay_status=="zapłacono"){
axios.put("http://127.0.0.1:8000/api/payments/"+id,{pay_status:"oczekuje"}).then((response)=>{
this.rows[index].pay_status=response.data[0].pay_status;
this.waitingInvoices = this.countInvoices();
this.toPay = this.calculatePayment();
});
}
},

Remove `data` key from fractal transformed single item

I'm using fractal with lumen framework to build an API. It works great but when I return any specific item, it return the result inside a data key.
{ data : { /** All data **/ }}
I understand the use of data key in a collection. But I don't feel the necessity of having data key in single result. ( Correct me if its a wrong REST convention )
So how can I remove data key from single result?
Put this code in your Bootstrap/app.phpcan help you to avoid data. You can make it as a service provider also.
$app->bind('League\Fractal\Manager', function ($app) {
$fractal = new \League\Fractal\Manager;
$serializer = new \League\Fractal\Serializer\ArraySerializer();
$fractal->setSerializer($serializer);
return $fractal;
});
$app->bind('Dingo\Api\Transformer\Adapter\Fractal', function ($app) {
$fractal = $app->make('\League\Fractal\Manager');
return new \Dingo\Api\Transformer\Adapter\Fractal($fractal);
});

Array of jquery DataTables objects gives type errors

I'm dynamically generating tables and every time I generate one, I create a corresponding DataTable object, which I store in an array.
tables1 = {};
I create the objects and get the values like so (posterized for easy viewing):
categoryIds.each( function ( value, index ) {
tables1[value]=jQuery('#tbl' + category_id).DataTable();
});
jQuery.ajax({
url: url,
type: 'get',
}).done(function(data) {
object = jQuery.parseJSON(data);
object.each(function(value, index) {
tables1[value.catid].row.add([value.id, value.title]);
});
categoryIds.each( function ( value, index ) {
tables1[value].draw();
//typeerror here
}
});
The above gives me a Uncaught TypeError: Cannot read property 'length' of undefined error, but works if I surround it with try catches.
Once I've created the tables and want to wipe them, even this simple function is giving me an typeerror:
jQuery.each(tables1, function ( index, value) {
tables1[index].clear().draw();
} );
I'm using DataTables 1.10, and googling this error seems to pop up mostly when dealing with ajax data sources, which I'm not using.

Datatables: How to reload server-side data with additional params

I have a table which gets its data server-side, using custom server-side initialization params which vary depending upon which report is produced. Once the table is generated, the user may open a popup in which they can add multiple additional filters on which to search. I need to be able to use the same initialization params as the original table, and add the new ones using fnServerParams.
I can't figure out how to get the original initialization params using the datatables API. I had thought I could get a reference to the object, get the settings using fnSettings, and pass those settings into a new datatables instance like so:
var oSettings = $('#myTable').dataTable().fnSettings();
// add additional params to the oSettings object
$('#myTable').dataTable(oSettings);
but the variable returned through fnSettings isn't what I need and doesn't work.
At this point, it seems like I'm going to re-architect things so that I can pass the initialization params around as a variable and add params as needed, unless somebody can steer me in the right direction.
EDIT:
Following tduchateau's answer below, I was able to get partway there by using
var oTable= $('#myTable').dataTable(),
oSettings = oTable.fnSettings(),
oParams = oTable.oApi._fnAjaxParameters(oSettings);
oParams.push('name':'my-new-filter', 'value':'my-new-filter-value');
and can confirm that my new serverside params are added on to the existing params.
However, I'm still not quite there.
$('#myTable').dataTable(oSettings);
gives the error:
DataTables warning(table id = 'myTable'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, please pass either no arguments
to the dataTable() function, or set bRetrieve to true.
Alternatively, to destroy the old table and create a new one, set bDestroy to true.
Setting
oTable.bRetrieve = true;
doesn't get rid of the error, and setting
oSettings.bRetrieve = true;
causes the table to not execute the ajax call. Setting
oSettings.bDestroy = true;
loses all the custom params, while setting
oTable.bDestroy = true;
returns the above error. And simply calling
oTable.fnDraw();
causes the table to be redrawn with its original settings.
Finally got it to work using fnServerParams. Note that I'm both deleting unneccessary params and adding new ones, using a url var object:
"fnServerParams": function ( aoData ) {
var l = aoData.length;
// remove unneeded server params
for (var i = 0; i < l; ++i) {
// if param name starts with bRegex_, sSearch_, mDataProp_, bSearchable_, or bSortable_, remove it from the array
if (aoData[i].name.search(/bRegex_|sSearch_|mDataProp_|bSearchable_|bSortable_/) !== -1 ){
aoData.splice(i, 1);
// since we've removed an element from the array, we need to decrement both the index and the length vars
--i;
--l;
}
}
// add the url variables to the server array
for (i in oUrlvars) {
aoData.push( { "name": i, "value": oUrlvars[i]} );
}
}
This is normally the right way to retrieve the initialization settings:
var oSettings = oTable.fnSettings();
Why is it not what you need? What's wrong with these params?
If you need to filter data depending on your additional filters, you can complete the array of "AJAX data" sent to the server using this:
var oTable = $('#myTable').dataTable();
var oParams = oTable.oApi._fnAjaxParameters( oTable );
oParams.push({name: "your-additional-param-name", value: your-additional-param-value });
You can see some example usages in the TableTools plugin.
But I'm not sure this is what you need... :-)

Unwrapping breeze Entity properties

I'm very new to breeze/knockout, but I'm 99% of the way to doing what I need to do. I'm using the Hot Towel template, and I'm successfully retrieving a list of items via breeze. The entity (ITBAL) is a database first Entity Framework entity. When I look at the JSON coming back in Fiddler, I see the correct data. The problem is that all of the properties of data.results are dependentobservables, and not the raw values themselves.
We have a custom grid control that is trying to display the data.results array. Because it is not expecting observables, it is simply displaying "function dependentobservable" instead of the value.
I tried to unwrap the object, but keep getting the circular reference error. I don't know why that is, since ITBAL isn't associated with anything.
The data as Fiddler reports it:
[{"$id":"1","$type":"WebUIHtml5HotTowel.Models.ITBAL, WebUIHtml5HotTowel","IBITNO":"A100 ","IBWHID":"1 ","IBITCL":"50","IBITSC":"3 ","IBSUSP":" ","IBVNNO":"100 ","IBPRLC":" ","IBSCLC":" ","IBCCCD":"P","IBPICD":" ","IBSAFL":"Y","IBSTCS":399.99000,"IBUSCS":0.00000,"IBAVCS":414.95214,"IBLCST":7.00000,"IBLCCC":20.0,"IBLCDT":110923.0,"IBLSCC":20.0,"IBLSDT":130111.0,"IBLXCC":19.0,"IBLXDT":990102.0,"IBMXO1":2100.000,"IBMXO2":0.000,"IBMXO3":0.000,"IBMNO1":5.000,"IBMNO2":0.000,"IBMNO3":0.000,"IBFOQ1":0.000,"IBFOQ2":0.000,"IBFOQ3":0.000,"IBOHQ1":327.000,"IBOHQ2":0.000,"IBOHQ3":0.000,"IBAQT1":1576.000,"IBAQT2":0.000,"IBAQT3":0.000,"IBBOQ1":50.000,"IBBOQ2":0.000,"IBBOQ3":0.000,"IBPOQ1":448.000,"IBPOQ2":0.000,"IBPOQ3":0.000,"IBIQT1":1446.000,"IBIQT2":0.000,"IBIQT3":0.000,"IBRMD1":10.000,"IBRMD2":0.000,"IBRMD3":0.000,"IBRYD1":10.000,"IBRYD2":0.000,"IBRYD3":0.000,"IBISM1":0.000,"IBISM2":0.000,"IBISM3":0.000,"IBISY1":0.000,"IBISY2":0.000,"IBISY3":0.000,"IBAMD1":0.000,"IBAMD2":0.000,"IBAMD3":0.000,"IBAYD1":0.000,"IBAYD2":0.000,"IBAYD3":0.000,"IBMMD1":0.000,"IBMMD2":0.000,"IBMMD3":0.000,"IBMYD1":0.000,"IBMYD2":0.000,"IBMYD3":0.000,"IBSMD1":1.0,"IBSMD2":0.0,"IBSMD3":0.0,"IBSYD1":1.0,"IBSYD2":0.0,"IBSYD3":0.0,"IBBLME":335.000,"IBBLYO":2680.000,"IBBLLY":1441.000,"IBNMTY":8.0,"IBNMLY":11.0,"IBQSMD":21.000,"IBQSYD":21.000,"IBQSLY":20.000,"IBISMD":16318.19,"IBISYD":16318.19,"IBISLY":45714.87,"IBCSMD":373.46,"IBCSYD":373.46,"IBCSLY":67.00,"IBDQMD":0.000,"IBDQYD":0.000,"IBDQLY":0.000,"IBDSMD":0.00,"IBDSYD":0.00,"IBDSLY":0.00,"IBDCMD":0.00,"IBDCYD":0.00,"IBDCLY":0.00,"IBNOMD":18.0,"IBNOYD":18.0,"IBNOLY":18.0,"IBPKMD":15.0,"IBPKYD":15.0,"IBPKLY":14.0,"IBINUS":" ","IBIAID":0.0,"IBSAID":0.0,"IBCQT1":1527.000,"IBCQT2":0.000,"IBCQT3":0.000,"IBFCST":"Y","IBDRSH":" ","IBWMIU":"JP","IBFL15":" ","IBUS20":" ","IBLPR1":0.00000,"IBLPR2":0.00000,"IBLPR3":0.00000,"IBLPR4":0.00000,"IBLPR5":0.00000,"IBLPCD":" ","IBABCC":"B","IBPRCL":0.0,"IBQBCL":" ","IBACDC":"Y","IBTDCD":" ","IBDOUM":" ","IBTP01":0.0,"IBTP02":0.0,"IBTP03":0.0,"IBTP04":0.0,"IBLMCC":20.0,"IBLMDT":130513.0,"IBTMPH":"Y","IBCOMC":" ","IBCOMF":0.00000,"IBITCT":" ","IBEOQT":0.000,"IBITCM":0.0,"IBBRVW":" ","IBPTID":" ","IBQTLT":0.0000,"IBCTY1":"AUS","IBCTY2":"AUS","IBTXCD":"1","IBREVS":"Y","IBITXC":" ","IBMNOQ":0.000,"IBSTUS":0.000,"IBUS30":" ","IBPSLN":" ","IBPLIN":"N","IBUPDP":"Y","IBDFII":"2011-08-11T00:00:00.000","IBLHRK":"A","IBPLNC":" "}]
My Controller:
[BreezeController]
public class ItemInquiryController : ApiController
{
readonly EFContextProvider<AplusEntities> _contextProvider = new EFContextProvider<AplusEntities>();
[System.Web.Http.HttpGet]
public string Metadata()
{
return _contextProvider.Metadata();
}
[HttpGet]
public IQueryable<ITBAL> ItemBalances(string itemNumber, string warehouse)
{
return _contextProvider.Context.ITBALs.Where(i => i.IBITNO == itemNumber && i.IBWHID == warehouse)
.OrderBy(i => i.IBWHID)
.ThenBy(i => i.IBITNO);
}
}
The relevant portion from the viewmodel:
var manager = new breeze.EntityManager("api/ItemInquiry");
var store = manager.metadataStore;
var itbalInitializer = function (itbal) {
itbal.CompositeKey = ko.computed(function () {
return itbal.IBITNO() + itbal.IBWHID();
});
};
store.registerEntityTypeCtor("ITBAL", null, itbalInitializer);
var index = "0" + (args.pageNum * args.pageSize);
var query = new breeze.EntityQuery("ItemBalances")
.withParameters({ itemNumber: "A100", warehouse: "1" })
.take(args.pageSize);
if (index > 0) {
query = query.skip(index);
}
manager.executeQuery(query).then(function (data) {
vm.itbals.removeAll();
var itbals = data.results;//[0].Data;
itbals.forEach(function (itbal) {
vm.itbals.push(itbal);
});
vm.totalRecords(1);
itemBalancesGrid.mergeData(vm.itbals(), args.pageNum, parseInt(vm.totalRecords()));
}).fail(function (e) {
logger.log(e, null, loggerSource, true, 'error');
});
I figure I must be missing something fairly simple, but it is escaping me.
UPDATE: I removed the BreezeController attribute from the ApiController, and it works correctly.
Jon, removing the [Breeze] attribute effectively disables breeze for your application so I don't think that is the long term answer to your problem.
If you don't actually want entities for this scenario - you just want data - than a Breeze projection that mentions just the data to display in the grid would seem to be the best choice. Projections return raw data that are not wrapped in KO observables and are not held in the Breeze EntityManager cache.
If you want the data as cached entities and you also want to display them in a grid that doesn't like KO observable properties ... read on.
You can unwrap a KO'd object with ko.toJS. However, the grid is likely to complain about circular references (or throw an "out of memory" exception as some grids do) ... even if the entity has no circular navigation paths. The difficulty stems from the fact that every Breeze entity has an inherent circularity by way of its entityAspect property:
something.entityAspect.entity //'entity' points back to 'something'
Because you are using Knockout for your model library and because you say ITBAL has no navigation properties ("is not related to anything"), I think the following will work for you:
manager.executeQuery(query).then(success) ...
function success(data) {
var unwrapped = ko.toJS(data.results).map(
function(entity) {
delete entity.entityAspect;
return entity;
});
vm.itbals(unwrapped);
vm.totalRecords(1); // huh? What is that "parseInt ..." stuff?
itemBalancesGrid.mergeData(vm.itbals(), args.pageNum, parseInt(vm.totalRecords()));
})
ko.toJS is a Knockout function that recursively unwraps an object or collection of objects, returning copies of values. Then we iterate over the copied object graphs, deleting their entityAspect properties. The array of results is stuffed into the vm.itbals observable and handed along.
You can imagine how to generalize this to remove anything that is giving you trouble.
Extra
What the heck is vm.totalRecords? I sense that this is supposed to be the total number of matching records before paging. You can get that from Breeze by adding .inlineCount() to the breeze query definition. You get the value after the query returns from the data.inlineCount property.
Do you really need vm.itbals()? If all you do here is pass values to the grid, why not do that and cut out the middle man?
The following success callback combines these thoughts
function success(data) {
var unwrapped = ko.toJS(data.results).map(
function(entity) {
delete entity.entityAspect;
return entity;
});
itemBalancesGrid.mergeData(unwrapped, args.pageNum, data.inlineCount);
})